Блог

У меня есть 5 вкладок с одними и теми же данными пользователя. На каждой вкладке есть входные данные для поиска по термину. Как можно повторно использовать код для выборки пользователей и поиска их на открытой вкладке. Код находится в этом JSFiddle:

 var listing = Vue.extend({
    data: function () {
        return {
            query: '',
            list: [],
            user: '',
        }
    },
    computed: {
        computedList: function () {
            var vm = this;
            return this.list.filter(function (item) {
                return item.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
            })
        }
    },
    created: function () {
        this.loadItems();
    },
    methods: {
        loadItems: function () {
            this.list = ['mike','bill','tony'],
        },
    }
});
var list1 = new listing({
    template: '#users-template'
});

var list2 = new listing({
    template: '#users-template2'
});

Vue.component('list1', list1);
Vue.component('list2', list2)

var app = new Vue({
   el: ".lists-wrappers",
});
  

запрос — строка термина для поиска

Список вычислений — массив отфильтрованных данных по поисковому запросу.

Но получаю ошибку для «query» и «ComputedList».

[Предупреждение Vue]: свойство или метод «запрос» не определены в экземпляре, но на них ссылаются во время визуализации. Обязательно укажите реактивные свойства данных в параметре data. (найден в корневом экземпляре).

Вы были действительно близки к тому, что у вас было. Причина query ошибки в том, что вы использовали query то, что для Vue выглядело как область корневых экземпляров. Вы не должны помещать шаблоны внутри других шаблонов. Всегда имейте их вне него (желательно в виде строки в определении вашего компонента).

Вы можете прочитать об этом немного здесь: https://vuejs.org/guide/components.html#DOM-Template-Parsing-Caveats

Вот как я бы подошел к вашей ситуации: https://jsfiddle.net/crswll/apokjqxx/6 /