javascript - Vue JS - 计算属性未更新的问题
问题描述
我对 VueJS 很陌生,最近我遇到了一些计算属性的问题,这些属性没有按我的意愿更新。我对 Stack Overflow、Vue 文档和其他资源进行了相当多的研究,但我还没有找到任何解决方案。
“应用程序”是基本的。我有一个父组件 (Laundry),它有 3 个子组件 (LaundryMachine)。这个想法是为每台机器设置一个按钮,该按钮显示其可用性并在单击时更新后者。
为了存储所有机器的可用性,我在父组件(可用性)中有一个数据,它是一个布尔数组。每个元素对应于机器的可用性。
当我单击按钮时,我知道由于 console.log 可以正确更新阵列可用性。但是,对于每台机器,计算属性“可用”不会更新是我想要的,我不知道为什么。
这是代码
父组件:
<div id="machines">
<laundry-machine
name="AA"
v-bind:machineNum="0"
v-bind:availableArray="this.availabilities"
v-on:change-avlb="editAvailabilities"
></laundry-machine>
<laundry-machine
name="BB"
v-bind:machineNum="1"
v-bind:availableArray="this.availabilities"
v-on:change-avlb="editAvailabilities"
></laundry-machine>
<laundry-machine
name="CC"
v-bind:machineNum="2"
v-bind:availableArray="this.availabilities"
v-on:change-avlb="editAvailabilities"
></laundry-machine>
</div>
</div>
</template>
<script>
import LaundryMachine from './LaundryMachine.vue';
export default {
name: 'Laundry',
components: {
'laundry-machine': LaundryMachine
},
data: function() {
return {
availabilities: [true, true, true]
};
},
methods: {
editAvailabilities(index) {
this.availabilities[index] = !this.availabilities[index];
console.log(this.availabilities);
}
}
};
</script>
子组件:
<template>
<div class="about">
<h2>{{ name }}</h2>
<img src="../assets/washing_machine.png" /><br />
<v-btn color="primary" v-on:click="changeAvailability">
{{ this.availability }}</v-btn>
</div>
</template>
<script>
export default {
name: 'LaundryMachine',
props: {
name: String,
machineNum: Number,
availableArray: Array
},
methods: {
changeAvailability: function(event) {
this.$emit('change-avlb', this.machineNum);
console.log(this.availableArray);
console.log('available' + this.available);
}
},
computed: {
available: function() {
return this.availableArray[this.machineNum];
},
availability: function() {
if (this.available) {
return 'disponible';
} else {
return 'indisponible';
}
}
}
};
</script>
无论如何,提前谢谢!
解决方案
您的问题不是来自子项中的计算属性,而是来自editAvailabilities
父项中的方法。
问题尤其是这一行:
this.availabilities[index] = !this.availabilities[index];
正如您在此处所读到的,当您按索引修改数组时,Vue 会出现跟踪更改的问题。
相反,您应该这样做:
this.$set(this.availabilities, index, !this.availabilities[index]);
切换该索引处的值并让 Vue 跟踪该更改。
推荐阅读
- android - 您可以在子活动中使用构造函数来更改父活动字符串变量吗?
- c# - 如何更改 WCF 服务上的绑定名称?
- python - 将字典键与同一字典中的所有其他键进行比较
- html - 防止提交和调用引导对话框
- c++ - 具有推导参数的模板函数指针数组变量
- node.js - 如何用 sequelize 做 3 个连接?
- c++ - std::type_index 的实现如何减少?
- swiftui - SwiftUI 如何在多级 NavigationView 中停止 List 的动画
- javascript - 如果对象的属性不为空,则将其设置为值。意外的令牌 ')' 错误
- three.js - 如何计算射箭射中某个点所需的速度矢量/