v-for 超过迭代次数 3x 次答案

【问题标题】：v-for exceeds the number of iterations 3x timesv-for 超过迭代次数 3x 次
【发布时间】：2020-09-26 07:51:36
【问题描述】：

我有一个简单的循环来列出视频和一个接受每个视频并计算价格的方法。问题是该方法被调用了 9 次，而循环中有 3 个元素。我有一个包含名为视频的视频的数组

> <li v-bind:key="video.video_id" v-for="video in videos">{{video.Name}}
> Price:{{PriceCalc(video)}}</li>

并且该方法现在只是记录

PriceCalc(video){
console.log(video.video_id);}

这被调用了 9 次，而视频数组只有 3 个元素

【问题讨论】：

请提供minimal reproducible example
你能添加你的videos数组吗？
视频：[{Name:"somevideo",video_id:"1",videoType:"Regular"},{Name:"somevideo2",video_id:"2",videoType:"children"} ,{Name:"somevideo3",video_id:"3",videoType:"Regular"}]
codepen.io/disfated/pen/zYrGmQG 工作正常
在你的 codepen 中，PriceCalc 只被调用 3 次，每个项目调用一次。

标签： vue.js for-loop vue-component

【解决方案1】：

这只是与变更检测有关。每当发生更改检测时，都会执行PriceCalc。避免在模板中调用方法，尤其是在 v-for 中。您通常可以使用 computed 属性，但作为 v-for，它不适合。我假设PriceCalc 应该计算一些东西，我建议你在脚本中处理该计算，然后在模板中显示它，这取决于你如何获取数据，在合适的 vue 钩子中或在接收到数据之后（如果来自 API）。比如：

this.videos.forEach(video => {
   video.price = // here do your calculation!
})

然后，您可以通过 {{ video.price }} 在您的v-for 中显示模板中的值。

【讨论】：