How to fix display with filterBy, Laravel and Vue.js?

Question

Laravel

There is this code

<div id="app">
<input type="text" v-model="input">
<ul>
  <li v-for="item in array">@{{ item.name }}</li>
</ul>
</div>

and like this

new Vue({
            el: '#app',
            data: {
                input: '',
                array: [
                {
                    name: 'Agel',
                    ag: 23
                },
                {
                    name: 'Mark',
                    ag: 26
                }
                ]
            }
        });

and when I add the line " | filterBy 'name'" to the v-for so that it turns out

<li v-for="item in array | filterBy 'name'">@{{ item.name }}</li>

He completely refuses to display the entire<div id="app"></div>

Answer 1

What version of vue are you using? If 2.0+, then vue.js refused to include native filters in the code (Probably due to a vulnerability or file weight). And instead, they suggest using third-party functions (libraries). https://lodash.com/docs/4.17.4#filter . It's a pity that they were removed, but you can write them yourself, make a custom filter, but here again, you need to use the filter as a function, that is, pass it as attributes in parentheses . Read about filters in the docks.