Vue组件在更新数据时导致无限循环

时间:2019-03-22 05:07:41

标签: loops vue.js vue-component infinite

每当我尝试更新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: {

    }
});

2 个答案:

答案 0 :(得分:1)

在Vue世界中,posBigInt = BigInteger.Parse(posBigInt.ToString("X8") & int_four.ToString("X8"), NumberStyles.HexNumber) 是事件侦听器,但是您需要提及需要侦听的事件类型。

如果是v-on事件,那么

click

希望这会有所帮助!

答案 1 :(得分:1)

听起来像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活动类型的总数。