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

Question

我对 VueJS 很陌生，最近我遇到了一些计算属性的问题，这些属性没有按我的意愿更新。我已经对 Stack Overflow、Vue 文档和其他资源进行了大量研究，但我还没有找到任何解决方案。

“应用程序”是基本的。我有一个父组件 (Laundry)，它有 3 个子组件 (LaundryMachine)。这个想法是为每台机器设置一个按钮，显示其可用性并在单击时更新后者。

为了存储所有机器的可用性，我在父组件(可用性)中有一个数据，它是一个 bool 数组。每个元素对应于机器的可用性。

当我单击按钮时，由于 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 跟踪该更改。