Array.protype.reverse()를 사용하여 Vuejs v-for 무한 업데이트 루프 실행

Array.protype.reverse()를 사용하여 Vuejs v-for 무한 업데이트 루프 실행

나는 어떤 방법으로도 해결할 수 없는 오류를 가지고 있다

[Vue warn] :구성요소 렌더링 함수에 무한 업데이트 루프가 있을 수 있습니다.에서 발견되다.

컴포넌트 사용 중

    <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: []
            }
       }
 }

....

Array.prototype.reverse 는 실제로 적용되는 어레이를 변경합니다.

Vue는 이 변경 사항을 선택하여 둘 다 트리거합니다.v-for(다른 사람을) 자극하다.reverse()이로 인해 Vue는 재렌더화되며, 이로 인해.reverse() 등 등 등 등 등 등 등

이 문제를 해결하려면computed얕은 복사물items[](예: 사용)Array파괴하다[...this.items]반전 리스트의 경우:

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

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

언급URL : https://stackoverflow.com/questions/49467217/vuejs-v-for-infinite-update-loop-using-array-prototype-reverse