入れ子になったループの計算されたプロパティ

Question

現在のアイテムに基づいてネストされたループの計算されたプロパティにアクセスできるのだろうかと思います。今のところ私は特定のプロパティを取得するメソッドを作成することでそれを実現しました。この余分な方法なしでそれを行う方法はありますか？

EDIT私はこの例をより明確にするために更新します。

const vm = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    categories: [ 
 
     { id: 0, text: 'zero' }, 
 
     { id: 1, text: 'one' }, 
 
     { id: 2, text: 'two' }, 
 
    ], 
 
    minions: [ 
 
     { name: 'A', category: 'zero' }, 
 
     { name: 'B', category: 'zero' }, 
 
     { name: 'C', category: 'one' }, 
 
     { name: 'D', category: 'two' }, 
 
    ], 
 
    }, 
 
    methods: { 
 
    getComputedData: function (name) { 
 
     return this[name]; 
 
    }, 
 
    }, 
 
    computed: { 
 
    zero: function() { 
 
     return this.minions.filter(({category}) => category === 'zero'); 
 
    }, 
 
    one: function() { 
 
     return this.minions.filter(({category}) => category === 'one'); 
 
    }, 
 
    two: function() { 
 
     return this.minions.filter(({category}) => category === 'two'); 
 
    } 
 
    }, 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script> 
 

 
<div id="app"> 
 
    <div 
 
    v-for="category in categories" 
 
    > 
 
    <h1>{{ category.text }}</h1> 
 
    <ul> 
 
     <li 
 
     v-for="minion in getComputedData(category.text)" 
 
     >{{ minion.name }}</li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

あなたは$rootとしてのviewmodelを参照することができますので、あなたがあなたのカテゴリにちなんで命名されているcomputedsは$root[category.text]です。下のスニペットを参照してください。

コンポーネントにいた場合は、特別な$root変数がないため、eval(category.text)にする必要があります。

どちらの場合でも、データに基づいて名前付きオブジェクトを作成しているので、ここではコードの匂いがあります（計算結果はほとんどが繰り返しコードです）。すべてのカテゴリをカバーする単一の計算または関数を作成する方がよいでしょう。

const vm = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    categories: [ 
 
     { id: 0, text: 'zero' }, 
 
     { id: 1, text: 'one' }, 
 
     { id: 2, text: 'two' }, 
 
    ], 
 
    minions: [ 
 
     { name: 'A', category: 'zero' }, 
 
     { name: 'B', category: 'zero' }, 
 
     { name: 'C', category: 'one' }, 
 
     { name: 'D', category: 'two' }, 
 
    ], 
 
    }, 
 
    computed: { 
 
    zero: function() { 
 
     return this.minions.filter(({category}) => category === 'zero'); 
 
    }, 
 
    one: function() { 
 
     return this.minions.filter(({category}) => category === 'one'); 
 
    }, 
 
    two: function() { 
 
     return this.minions.filter(({category}) => category === 'two'); 
 
    } 
 
    }, 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script> 
 

 
<div id="app"> 
 
    <div 
 
    v-for="category in categories" 
 
    > 
 
    <h1>{{ category.text }}</h1> 
 
    <ul> 
 
     <li 
 
     v-for="minion in $root[category.text]" 
 
     >{{ minion.name }}</li> 
 
    </ul> 
 
    </div> 
 
</div>