Question

当我使用v-if之后，我在控制台中得到[Vue警告]，不知道如何解决这个问题。 [Vue警告]：您可能在组件渲染功能中有一个无限的更新循环。

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

Answer 1

更改

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>

Answer 2

只是为了澄清无限更新循环的来源。

v-if="loadComplete = !loadComplete"是一项作业，您将!loadComplete的值分配给loadComplete。无论何时在Vue中分配变量，它都会触发一个新的渲染，在下一个渲染中它再次执行相同的赋值......这会导致无限循环。

@PaulTsai使用正确的v-if="!loadComplete"

方式给出了一个很好的例子

我在使用时会在控制台中收到错误＆＃34; v-if＆＃34;指示。无限循环

2 个答案: