Call vue method from laravel blade

Question

I have a blade in my laravel project that is instantiating a vue component, which loads and operates fine. The problem now is that I'm trying to call a method in my vue component from a select box in the blade and it isn't registering.

As you can see below, I have a method call that should log to the console but when I change the select in the blade it doesn't log in the console, no errors either.

What am I doing wrong?

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

Shouldn't that <select> be in your component? And filterItem is not the same as createItem — brombeer
@kerbholz sorry that's a typo, they are both filterItem.....but no, the select doesn't exist in the component, it's in the blade which exists on it's own and is used with other components elsewhere, so this select should be able to control the function as a parent I would think — Geoff_S
@TomN. Make an edit to question with that to allow the rest have the same code in front of their eyes as much as your have. — Tpojka
Any console error or output? Can you provide some intentional console output in mounted event? — Tpojka

katsarov katsarov · Accepted Answer · 2020-05-05T08:08:09

You can't call the method since it is outside of your component. Here is an example approach you can do this: 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>

Now they share statusFilter data and you can make your logic in vue component to filter the data. In case you don't have access to edit elastic-search-autocomplete component you can always wrap it in your own.

Call vue method from laravel blade

1 Answers