Question

我对VueJS还是很陌生，最近我遇到了一些无法按我希望更新的计算属性的麻烦。我已经对Stack Overflow，Vue文档和其他资源进行了很多研究，但是我还没有找到任何解决方案。

“应用”是基本的。我有一个父组件（洗衣），它有3个子组件（LaundryMachine）。想法是为每台计算机配备一个按钮，该按钮显示其可用性并在单击时更新后者的可用性。

为了存储所有计算机的可用性，我在父组件（可用性）中有一个数据，该数据是一个布尔数组。每个元素都对应一台机器的可用性。

单击按钮时，由于console.log，我知道阵列可用性已正确更新。但是，对于每台机器，计算出的属性“ available”都不会更新，因为我希望更新它，却不知道为什么。

这是代码

父组件：

<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跟踪更改。

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

1 个答案: