切换数组VueJS中元素的属性？

Question

我有一个文本字段，您可以在其中输入字段，on Click 它将一个值添加到呈现芯片的数组中。现在每个芯片都有一个value 属性和一个toggle 属性。默认情况下，每个新芯片都将toggle 设置为false。现在我可以添加和删除芯片。使用deleteChips 方法删除芯片。我想要做的是当只剩下一个芯片时，芯片的toggle 值应该根据当时的情况动态更改为false 或true。所以基本上toggle = !toggle。

我尝试使用array.length，但无法正常工作。

这是一个示例pen

这里是示例代码：-

new Vue({
  el: "#app",
  data() {
    return {
      inputValue: "",
      inputArray: [],
      selectedChip: ""
    };
  },
  methods: {
    createChips() {
      this.inputArray.unshift({
        value: this.inputValue,
        toggle: false
      });
      this.inputValue = "";
    },
    deleteChips(chip) {
      let index = this.inputArray.filter((el) => el.chip === chip);
      this.inputArray.splice(index, 1);
    },
    chipSelection(item) {
      this.selectedChip = item;
    },
    toggleChip(item) {
      item.toggle = true;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-layout justify-center>
        <v-flex xs6>
          <v-text-field v-model="inputValue"></v-text-field>
          <v-btn @click="createChips">Click Me</v-btn>
          <div v-if="inputArray.length > 0">
            <div v-for="chip in inputArray">
              <v-chip :key="chip.value" close @click="chipSelection(chip.value)" @input=deleteChips(chip)>
                <v-avatar>
                  <v-icon @click="toggleChip(chip.value)">
                    account_circle
                  </v-icon>
                </v-avatar>
                <span v-if="selectedChip === chip.value">{{chip.value}}</span>
              </v-chip>
            </div>
          </div>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

任何帮助将不胜感激。谢谢你。

Answer 1

tbh，我无法真正遵循您的意图，但根据 cmets，您可能想观看 inputArray 并根据其长度的更改执行代码。

watch: {
    inputArray(newValue, oldValue) {
        if ((newValue.length !== oldValue.length) && (newValue.length === 1)) {
            this.inputArray[0].toggle = !this.inputArray[0].toggle;
        }
    }
}