javascript - 从 laravel blade 调用 vue 方法

Question

我的 laravel 项目中有一个 blade 正在实例化一个 vue 组件，它可以正常加载和运行。现在的问题是我试图从 Blade 中的选择框调用我的 vue 组件中的方法，但它没有注册。

正如您在下面看到的，我有一个应该记录到控制台的方法调用，但是当我更改 Blade 中的选择时，它没有记录到控制台，也没有错误。

我做错了什么？

Blade .php

        <div style="display:flex; justify-content: space-between; align-items: center;" class="col-lg-4">
            <select @change="filterItem" style="border:none; border-bottom: 1px solid gray">
                <option>Open</option>
                <option>Closed</option>
                <option>Paused/Waiting on user</option>
            </select>
        </div>

        <div>
            <elastic-search-autocomplete></elastic-search-autocomplete>
        </div>

elasticSearchAutocomplete.vue

methods: {

  filterItem(){
    console.log('this is coming from the blade');
  },
}
.......

Answer 1

您不能调用该方法，因为它在您的组件之外。这是您可以执行此操作的示例方法:elasticSearchAutocomplete.vue

<template>
    <div>
        <slot name="filters" v-bind:statusFilter="statusFilter">

        </slot>

        <div>
            //your elastic search component code
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                statusFilter: null
            }
        }
    }
</script>

Blade :

<elastic-search-autocomplete>
    <template v-slot:statusFilter="statusFilter">
    <div style="display:flex; justify-content: space-between; align-items: center;" class="col-lg-4">
            <select v-model="statusFilter" style="border:none; border-bottom: 1px solid gray">
                <option>Open</option>
                <option>Closed</option>
                <option>Paused/Waiting on user</option>
            </select>
        </div>
    </template>
</elastic-search-autocomplete>

现在他们共享 statusFilter 数据，您可以在 vue 组件中创建逻辑来过滤数据。如果您无权编辑 elastic-search-autocomplete 组件，您可以随时将其包装在自己的组件中。