Infinite loop code sharing in VUE-JS Tutorial-php.cn

Infinite loop code sharing in VUE

小云云

Release： 2018-02-03 13:19:09

Original

3352 people have browsed it

This article mainly introduces you to the infinite loop in vue through example code. The code is simple and easy to understand, very good, and has reference value. Friends who need it can refer to it. I hope it can help everyone.

The code is as follows:

<template>
<p id="">
 <ul v-for="(item,index) in listaaa">
  <li v-if=&#39;dealFun(item.cdate,index)&#39;>{{item.cdate}}</li>
 </ul>
</p>
</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>

Copy after login

The reason for the infinite loop: the flagName change causes the view to be updated, and the view update causes the dealFun() function Keep executing, and then flagName is updated again; the cycle repeats;

Solution: (use global variables)

<template>
<p id="">
 <ul v-for="(item,index) in listaaa">
  <li v-if=&#39;dealFun(item.cdate,index)&#39;>{{item.cdate}}</li>
 </ul>
</p>
</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>

Copy after login

Related recommendations:

EasyUI Tree Tree component infinite loop example analysis

Example explanation CSS3 to achieve seamless scrolling of infinite loop

php method to achieve infinite loop to obtain data in MySQL Example

The above is the detailed content of Infinite loop code sharing in VUE. For more information, please follow other related articles on the PHP Chinese website!