根据 Vue 文档在嵌套的 v-for 循环中计算 vs 方法

Question

在这个页面上，它说：

在

计算属性不可行的情况下(例如，在内部 嵌套的 V-for 循环)，您可以使用一个方法

但是，我能够在嵌套的 v-for 循环中使用计算道具(检查小提琴)

new Vue({
el: '#sample',
data() {
return {
numbers: [1, 2, 3, 4, 5]
}
},
computed: {
even() {
return this.numbers.filter(n => n % 2 === 0)
}
}
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="sample">
<div v-for="n in numbers">
{{n}}
<div v-for="e in even">
..{{e}}
</div>
</div>
</div>

我错过了什么？

Answer 1

好的，我相信文档意味着计算属性在嵌套v-for循环中不可行，例如，如果内部数组依赖于当前的外部数组元素。

举个简单的例子，假设我们想要一个显示从 1 到 5 的数字的循环。在每个数N之后，我们需要一个嵌套循环，它将包含导致数N的所有整数。

检查小提琴，看看我在说什么。

new Vue({
el: '#sample',
data() {
return {
numbers: [1, 2, 3, 4, 5]
}
},
methods: {
getLeadingNbs(n) {
	return (Array(n)+'').split(',').map( (n,i) => i )
}
}
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="sample">
<div v-for="n in numbers">
{{n}}
<div v-for="l in getLeadingNbs(n)">
....{{l}}
</div>
<br>
</div>
</div>

Answer 2

文档意味着不可能为numbers的每个元素计算，因为无法动态创建计算。但是，可以创建一个计算，该计算返回一个数组，该数组的每个元素都有一个值numbers。