Vue 错误 未捕获(在承诺中) 范围错误:更新计算值时超出最大调用堆栈大小

Question

这是我在计算下的代码

computed: {
display: {
get() {
return this.display
},
set(newValue) {
this.display = newValue
}
}
},

我正在尝试更新从模型下的函数计算的值

async submit() {
this.display = false;
}

提交函数运行时，我在控制台上出现以下错误

Uncaught (in promise) RangeError: Maximum call stack size exceeded

Answer 1

当你在set中写this.display = newValue时，它只会导致再次调用set，循环一圈又一圈。

要将 prop 包装在计算属性中，您需要为其指定不同的名称。此外，set应发出事件，以便父组件可以更新数据。您不能直接在当前组件中执行此操作。

下面的示例使用sync修饰符，但如果您愿意，可以使用单独的事件侦听器。

const Child = {
template: `<input v-model="displayModel">`,
props: ['display'],

computed: {
displayModel: {
get () {
return this.display
},

set (display) {
this.$emit('update:display', display)
}
}
}
}
new Vue({
el: '#app',

components: {
Child
},

data () {
return {
parentDisplay: 'hello'
}
}
})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
<p>{{ parentDisplay }}</p>
<child :display.sync="parentDisplay"></child>
</div>

您也可以直接emit事件，而不是修改属性，完全跳过计算的属性。 即用$emit替换this.display = false;。

或者，如果 prop 仅用于设置属性的初始值，那么您应该在首次创建组件时将其复制到data属性：

props: ['display'],
data () {
return {
internalDisplay: this.display
}
}

然后，您可以直接设置internalDisplay的值。