每当我尝试更新medMins时,该函数会产生两次正确的结果。但是,Vue返回
[Vue警告]:您可能在组件渲染功能中有一个无限的更新循环。
我尝试将medMins切换到计算属性,但得到了相同的结果。我正在读的问题是组件呈现然后我正在更改一些组件数据,在此期间一些反应数据被更改导致它重新渲染...等等。有没有办法可以避免这种情况?我可以更新此组件中的medMins还是我必须采取其他方式?任何帮助将非常感激。
Vue.component('day', {
//props: ['items'] or
props: {
dayofweek: {
type: Array,
required: true
},
name:{
type: String,
default: 'Blarg'
},
},
data: function() {
return {
medMins: 0
}
},
methods: {
updateMed: function(day) {
this.medMins += Number(day.endTimeMillis/60000).toFixed()-Number(day.startTimeMillis/60000).toFixed()
}
},
template: ''+
' <div>'+
' <h1>{{name}}</h1>\n' +
' <div class = "row">\n' +
' <div class ="col" v-for="day in dayofweek">{{day.activityType}}' +
' <div v-if="`${day.activityType}` == 45" v-on="updateMed(day)"></div>' +
' </div>' +
' </div>' +
' <h1>{{medMins}}</h1>'+
' </div>',
computed: {
}
});
听起来你只想要medMins
的计算属性。像这样的东西
// no need for "data" as far as I can see
computed: {
medMins () {
return this.dayofweek.reduce((medMins, { activityType, endTimeMillis, startTimeMillis }) => {
if (activityType == 45) {
medMins += Number(endTimeMillis/60000).toFixed()-Number(startTimeMillis/60000).toFixed()
}
return medMins
}, 0)
}
},
template: `
<div>
<h1>{{name}}</h1>
<div class = "row">
<div class="col" v-for="day in dayofweek">
{{day.activityType}}
</div>
</div>
<h1>{{medMins}}</h1>
</div>
`
这将为medMins
生成一个数字,用于计算所有45
活动类型的总计。
在Vue世界中,v-on
是一个事件监听器,但你需要提到你需要监听的类型事件。
让我们说如果它是click
事件那么
v-on:click="updateMed(day)"
希望这可以帮助!