v-if 지시문을 사용하면 콘솔에 오류가 발생합니다.무한 루프

v-if 지시문을 사용하면 콘솔에 오류가 발생합니다.무한 루프

v-if를 사용하면 콘솔에 [Vue warn]라는 메시지가 표시되지만 이 문제를 해결하는 방법을 알 수 없습니다.[Vue warn] :구성요소 렌더링 함수에 무한 업데이트 루프가 있을 수 있습니다.

<template>
  <div class="example-component">
      <div class="spinner-box" v-if="loadComplete = !loadComplete">
        <div class="spinner-inner">
          <i class="fas fa-circle-notch fa-spin"></i>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'ExampleComponent',
  data () {
    return {
      loadComplete: false
    }
  }
</script>

바꾸다

v-if="loadComplete = !loadComplete"

로.

v-if="!loadComplete"

예

https://2ozkjp4vyp.codesandbox.io/

<template>
    <div id="app">
        <img width=200 src="./assets/logo.png">
        <div class="loader" v-if="!loadComplete"></div>
        <div v-else>
            <p>asynchronous data from firebase</p>
            <button @click="loadDataFromFirebase">Reload</button>
        </div>
    </div>
</template>

<script>
    export default {
    name: 'app',
        data: () => ({
            loadComplete: false
        }),
        mounted () {
            this.loadDataFromFirebase()
        },
        methods: {
            loadDataFromFirebase () {
                this.loadComplete = false
                setTimeout(() => {
                    this.loadComplete = true
                }, 1000)
            }
        }
  }
</script>

무한 업데이트 루프의 원인을 명확히 하기 위해서입니다.

그v-if="loadComplete = !loadComplete"값을 할당하는 할당입니다.!loadComplete로.loadCompleteVue에서 변수를 할당할 때마다 새로운 렌더가 트리거되고 다음 렌더에서 동일한 할당이 다시 실행됩니다.그 결과 무한 루프가 발생합니다.

@PaulTsai는 올바른 방법으로 좋은 예를 들었다.v-if="!loadComplete"

언급URL : https://stackoverflow.com/questions/48716886/i-get-error-in-console-when-use-v-if-directive-infinite-loop