嵌套循环中的计算属性

我想知道是否可以根据当前项目访问嵌套循环中的计算属性。至于我现在通过创建一种获得特定属性的方法来实现它。有没有办法做到这一点，没有这个额外的方法？嵌套循环中的计算属性

编辑我更新我的示例，使其更清晰。

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>

来源

2017-10-08 Adrian Baran

看起来像你的情况'computed'是不是真的有必要，除非你有一个具体的使用情况？ – kevguy

您好@kevguy一个片段就是为了显示我的意思是通过访问嵌套循环中的计算属性。正如你所建议的，我根本不需要计算属性。我想知道如果有需要的话。 –

@kevguy我更新了我的示例，以便更具体化 –

您可以参考视图模型为$root，所以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>

来源

2017-10-08 11:46:37

谢谢@Roy J.我完全同意你关于代码味道的观点。我只是想看看这样的事情是否可能:) –

嵌套循环中的计算属性

回答

相关问题