Vue 경고 수정 방법:구성요소 렌더링 함수에 무한 업데이트 루프가 있을 수 있습니다.

Vue 경고 수정 방법:구성요소 렌더링 함수에 무한 업데이트 루프가 있을 수 있습니다.

다음과 같은 무한 루프 경고가 발생합니다.메서드 호출로 인해 템플릿의 for loop 변수를 변경했기 때문일 수 있습니다.어떻게 고칠지 알아?루프가 완료되기 때문에 실제로는 무한 루프는 아니지만 경고를 수정하고 싶습니다.

[Vue warn]: You may have an infinite update loop in a component render function.

코드 조각:

new Vue({
  el: '#app',
  data: {
    contents: {"34": {"id": 34, build_name: "email_simple", build_readable: "Email"},"35": {"id": 35, build_name: "email_complex", build_readable: "Email"},"36": {"id": 36, build_name: "email_half", build_readable: "Email"}},
    last_build_type: '',
    contents_tree: [34,35,36]
  }, 
  methods: {
      checkBuildType(id){
        let check = false;
        if(this.last_build_type !== this.contents[id].build_name){
            check = true
        }
        this.last_build_type = this.contents[id].build_name;
        return check
      }

  }
  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <template v-for="(id, i) in contents_tree">
      <div v-bind:key="i + '_' + id" class="inline">
          <template v-if="checkBuildType(id)">
              {{i}} - {{id}} -
              {{contents[id].build_readable}}
              <br>
            
          </template>

    </div>
  </template>
</div>

Vue가 각 항목에 대해 재렌더해야 하기 때문에 이 경고가 표시됩니다.v-forfor 루프가 컴포넌트 상태를 갱신하기 때문에 루프가 발생합니다.이 솔루션은 각 어레이 항목에 대한 결과를 계산된 속성(기본적으로 인덱스 개체)에서 한 번에 계산하고v-for를 사용하는 것보다checkBuildType방법.

new Vue({
  el: '#app',
  data: {
    contents: {
      "33": {
        "id": 33,
        build_name: "email_half",
        build_readable: "Email"
      },
      "34": {
        "id": 34,
        build_name: "email_simple",
        build_readable: "Email"
      },
      "35": {
        "id": 35,
        build_name: "email_complex",
        build_readable: "Email"
      },
      "36": {
        "id": 36,
        build_name: "email_half",
        build_readable: "Email"
      },
      "37": {
        "id": 37,
        build_name: "email_half",
        build_readable: "Email"
      }
    },
    last_build_type: '',
    contents_tree: [34, 35, 36, 37, 33]
  },
  computed: {
    buildTypes() {
      const buildTypesMap = {};
      for (id of this.contents_tree) {
        buildTypesMap[id] = this.checkBuildType(id);
      }
      return buildTypesMap
    }
  },
  methods: {
    checkBuildType(id) {
      let check = false;
      if (this.last_build_type !== this.contents[id].build_name) {
        check = true
      }
      this.last_build_type = this.contents[id].build_name;
      return check
    }

  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <template v-for="(id, i) in contents_tree">
      <div v-bind:key="i + '_' + id" class="inline">
          <template v-if="buildTypes[id]">
              {{i}} - {{id}} -
              {{contents[id].build_readable}}
              <br>
            
          </template>

</div>
</template>
</div>

언급URL : https://stackoverflow.com/questions/60848954/how-to-fix-vue-warning-you-may-have-an-infinite-update-loop-in-a-component-rend