VUE中的无限循环

<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>

VUE中的无限循环_第1张图片
导致无限循环的原因: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>

你可能感兴趣的:(VUE)