这是非常简单的事情，我知道这是一个新手的错误，但我在这个问题上受阻。我想知道如何在模板内执行函数，而无需事件触发或渲染数据。在这个例子中，我不想增加numberOfItems，这是这个组件执行的循环数。在v-for中，我添加了{{ aFunctionCall（）}}，但这是在无限循环中执行的，因为组件正在尝试递归地重新呈现。
这是在控制台中给予我Vue的警告。日志：
已超过最大递归更新数。这意味着你有一个React性的效果，即改变自己的依赖关系，从而递归地触发自己。可能的源包括组件模板、呈现函数、更新的钩子或监视器源函数。
如何在每个循环中执行一个函数，而不需要递归地重新呈现？
这是组件代码。
<template>
<div class="repeater-wrapper">
<div
class="repeater-item"
v-for="(input, index) in min"
>
{{ addNumberOfItems() }}
{{ sayHello() }}
</div>
</div>
</template>
<script>
export default {
props: {
min: {
type: Number
},
max: {
type: Number,
default: 10
}
},
data() {
return {
status: 'normal',
validate: true,
numberOfItems: 0
}
},
methods:{
addNumberOfItems(number=1){
console.log( 'It is fired', this.numberOfItems )
this.numberOfItems += number;
return this.numberOfItems;
},
sayHello(){
//Any other function I want to execute on each loop
}
}
}
</script>调用此组件的父组件是：
<Repeater :min="2"/>
1条答案
按热度按时间3qpi33ja1#
你好，你可以这样修复它：
在您提供的第一个addNumberOfItems方法中，您正在分配this的结果。numberOfItems + number添加到tmp数据属性，这意味着numberOfItems属性未被直接修改。这可能就是为什么在模板中使用此方法时不会遇到无限循环的原因。
在第二个addNumberOfItems方法中，使用+=运算符直接修改numberOfItems属性，如果numberOfItems属性的使用方式导致模板依赖于它，则可能会触发模板的重新呈现。
例如，如果您有一个依赖于numberOfItems的computed属性，或者如果您在v-for循环或计算类中使用numberOfItems，则直接修改numberOfItems属性可能会导致模板重新呈现，如果处理不当，则会导致无限循环。
我建议修改变量名：）
希望对你有用！