N个选项卡中的vuejs2可重用代码

Question

我有 5 个选项卡包含同一用户的数据。每个选项卡都有一个按术语搜索的输入。如何重用代码来获取用户并在打开的选项卡中搜索他们。代码在 this 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 - 按搜索词过滤的数据数组。

但是 "query" 和 "ComputedList" 出现错误。

[Vue warn]: Property or method "query" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance).

Answer 1

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

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

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

N个选项卡中的vuejs2可重用代码

vuejs2 reusable code in N tabs

duplicates

vue.js

vue-component

vuejs2