从 laravel 刀片调用 vue 方法

Posted 2023-02-22

【中文标题】从 laravel 刀片调用 vue 方法

【英文标题】：Call vue method from laravel blade

【发布时间】：2020-08-19 16:52:36

【问题描述】：

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

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

我做错了什么？

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');
  ,

.......

【问题讨论】：

不应该<select> 在你的组件中吗？而且filterItem和createItem不一样

@kerbholz 抱歉打错了，它们都是 filterItem .....但是不，组件中不存在选择，它在刀片中，它自己存在并与其他地方的其他组件，所以我认为这个选择应该能够控制作为父级的功能

@TomN。对此问题进行编辑，以允许其他人在他们眼前看到与您一样多的相同代码。

@Tpojka 现在有编辑修复了

任何控制台错误或输出？你能在挂载事件中提供一些有意的控制台输出吗？

【参考方案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>

刀片：

<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 组件，您可以随时将其包装在您自己的组件中。