我有 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",
});
查询 - 要搜索的术语字符串
ComputedList - 按搜索词过滤的数据数组。
但是“查询”和“ComputedList”出现错误。
[Vue 警告]:属性或方法“查询”未在实例上定义,但在渲染期间被引用。确保在 data 选项中声明反应数据属性。(在根实例中找到)。