Question

在this page上，它说：

在计算属性不可行的情况下（例如在内部嵌套的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之后，我们需要一个嵌套循环，它将包含所有导致数字{{{{1}的数字。 1}}。

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

＆＃13;

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

＆＃13;

Answer 2

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

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

2 个答案: