Вызов vue метод из laravel blade

Question

В моем проекте 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');
  },
}
.......

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, и вы можете сделать свой logi c в vue компонент для фильтрации данных. Если у вас нет доступа для редактирования компонента elasti c -search-autocomplete, вы всегда можете обернуть его своим собственным.