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",
});

query - 検索する用語の文字列

ComputedList - 検索語でフィルター処理されたデータの配列。

しかし、「query」と「ComputedList」でエラーが発生します。

[Vue 警告]: プロパティまたはメソッド「クエリ」はインスタンスで定義されていませんが、レンダリング中に参照されます。data オプションでリアクティブ データ プロパティを宣言してください。(ルートインスタンスにあります)。

4

1 に答える 1

2

あなたはあなたが持っていたものに本当に近かった。queryエラーの理由は、queryVue のように見えるルート インスタンス スコープを使用していたことです。テンプレートを他のテンプレート内に配置しないでください。常にその外側に配置してください (できれば、コンポーネント定義の文字列として)。

ここで少し読むことができます: https://vuejs.org/guide/components.html#DOM-Template-Parsing-Caveats

私があなたの状況にアプローチする方法は次のとおりです: https://jsfiddle.net/crswll/apokjqxx/6/

于 2016-10-10T11:54:48.773 に答える