v-for构造内部的Vue JS模板中的多个临时变量？

Question

我有这样的构造：

<div v-for="item in items">
  <p>{{ f1(item).k1 }}</p>
  <p>{{ f1(item).k2 }}</p>
  <p>{{ f2(item).k3 }}</p>
  <p>{{ f2(item).k4 }}</p>
</div>

其中f1和f2是组件的方法，这些方法返回具有字段k1，k2，k3，k4的对象。在此示例中，方法被调用的次数是模板中需要的次数，这可能会很昂贵。

是否可以将计算结果存储到变量v1和v2中以防止多次调用？

我找到了一个临时变量的解决方案：

<div v-for="item in items" :set="v1 = f1(item)">
  <p>{{ v1.k1 }}</p>
  <p>{{ v2.k2 }}</p>
</div>

但是我不能优雅地将它归纳为带有两个变量的情况。我还遇到了使用v-for而不是我以前使用的div为标签创建不同组件的解决方案，这似乎太复杂和笨重。

Answer 1

几乎普遍是bad idea to call methods from your template。

这实际上是计算属性的用途。

computed: {
  calculatedItems () {
    return this.items.map(item => ({
      f1: this.f1(item),
      f2: this.f2(item)
    }))
  }
}

这仅在需要时执行（即，如果items发生更改）。现在，您可以在模板中进行迭代，而无需进行任何方法调用

<div v-for="item in calculatedItems">
  <p>{{ item.f1.k1 }}</p>
  <p>{{ item.f1.k2 }}</p>
  <p>{{ item.f2.k3 }}</p>
  <p>{{ item.f3.k4 }}</p>
</div>