1

我有 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 选项中声明反应数据属性。（在根实例中找到）。

4

1 回答 1

2

你真的很接近你所拥有的。错误的原因query是您query在 Vue 看来是在根实例范围内使用的。您不应该将模板放在其他模板中。始终将它们放在它之外（最好作为组件定义中的字符串）。

你可以在这里阅读一下：https ://vuejs.org/guide/components.html#DOM-Template-Parsing-Caveats

这是我处理您的情况的方法：https ://jsfiddle.net/crswll/apokjqxx/6/

于 2016-10-10T11:54:48.773 回答