<template>
<div id="">
  <ul v-for="(item,index) in listaaa">
    <li v-if='dealFun(item.cdate,index)'>{{item.cdate}}</li>
  </ul>
</div>
</template>
<script>
export default {
  name: "",
  data(){
      return {
          listaaa: [{
              cdate: '123'
            },
            {
              cdate: '456'
            },
          ],
          flagName: ''
      }
  },
  methods: {
    dealFun(arg, index) {
      console.log('---------------------------')
      if (arg == this.flagName) {
        return false
      } else {
        this.flagName = arg
        return true
      }
    }
  },
}
</script>
<style  scoped>
</style>

这里写图片描述
导致无限循环的原因:flagName改变导致视图更新,视图更新又导致 dealFun()函数不停执行,进而flagName再次更新;循环往复;
解决办法:(使用全局变量)

<template>
<div id="">
  <ul v-for="(item,index) in listaaa">
    <li v-if='dealFun(item.cdate,index)'>{{item.cdate}}</li>
  </ul>
</div>
</template>
<script>
var flagName;
export default {
  name: "",
  data(){
      return {
          listaaa: [{
              cdate: '123'
            },
            {
              cdate: '456'
            },
          ],
        //   flagName: ''
      }
  },
  methods: {
    dealFun(arg, index) {
      console.log('---------------------------')
      if (arg == flagName) {
        return false
      } else {
        flagName = arg
        return true
      }
    }
  },
}
</script>
<style  scoped>
</style>
Logo

前往低代码交流专区

更多推荐