Question

我有一个我无法以任何方式解决的错误

[Vue警告]：您可能在组件渲染功能中有一个无限的更新循环。在发现

在组件使用中

    <div  v-for="item in items">
         {{item.title}}
    <div>
.................
    <div  v-for="item in items.reverse()">
         {{item.title}}
    <div>

export default {
   name: "component-name"
   data(){
        return { 
            items: []
            }
       }
 }

...

Answer 1

Array.prototype.reverse 实际修改了它应用于的数组。

Vue接受此更改并触发v-for重新评估，触发另一个.reverse()。这会触发Vue重新渲染，导致它.reverse() 等等等等等等等等等 ......

要解决此问题，请在computed的浅表副本上使用items[]属性（例如，使用Array解构[...this.items]作为反转列表：

＆＃13;

new Vue({
  el: '#app',
  data() {
    return {
      items: [1, 2, 3, 4]
    }
  },
  computed: {
    itemsReverse() {
      return [...this.items].reverse()
    }
  }
})

＆＃13;

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <ul v-for="item in items">
    <li>{{item}}</li>
  </ul>
  <hr />
  <ul v-for="item in itemsReverse">
    <li>{{item}}</li>
  </ul>
</div>

＆＃13;

使用Array.prototype.reverse（）的Vuejs v-for无限更新循环

1 个答案: