Vue JS - 计算属性未更新的问题

Question

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

无论如何，提前谢谢！

Answer 1

您的问题不是来自子级中的计算属性，而是来自父级中的editAvailabilities 方法。

问题尤其是这一行：

this.availabilities[index] = !this.availabilities[index];

正如您can read here 一样，当您按索引修改数组时，Vue 会出现跟踪更改的问题。

相反，您应该这样做：

this.$set(this.availabilities, index, !this.availabilities[index]);

切换该索引处的值并让 Vue 跟踪该更改。