[Vuejs]-Nested vue instance not returning computed: function values

by

0👍

✅

So, I was able to figure it out after reading the documentation, I wound up using a component with inline-template.

In my base.twig I create one and only 1 instance of Vue.

new Vue({
    el: '#app',
});

And now in my user.html file that extends the base.twig I created a component.

This wound up being the component and how it was used to have a search function working that I provided in the jsfiddle example in the question.

Vue.component('user-search', {
    data: function () {
        return {
            search_users: '',
            users: {{ users|raw }} // this here is json_encoded data from twig passed from the php framework controller
        }
    },
    computed: {
        filteredUsers,
    }
});

function filteredUsers(){
    var self = this;
    return this.users.filter(function(cust){
        return cust.first_name.toLowerCase().indexOf(self.search_users.toLowerCase())>=0;
    });
}

And to use the component(showing how to use it based on my code):

<user-search inline-template>
    <input type="text" v-model="search_users">
    <!-- rest of the code with the for loop -->
</user-search>

Leave a comment