当我使用 v-if 后,我的控制台中出现 [Vue warn],不知道如何解决这个问题。 [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>
最佳答案
改变
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>
关于vue.js - 使用 "v-if"指令时,控制台出现错误。无限循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48716886/