Question

我有一个文本字段，您可以在其中输入字段，ConstraintLayout会向呈现芯片的数组中添加一个值。现在，每个筹码都有一个on Click属性和一个value属性。默认情况下，每个新芯片都将toggle设置为toggle。现在，我可以添加和删除筹码。通过使用false方法删除筹码。我要尝试做的是，仅剩一个芯片时，芯片的deleteChips值应根据当时的动态变化为toggle或false。所以基本上是true。

我尝试使用toggle = !toggle，但无法使其正常工作。

以下是示例pen

这是示例代码：-

array.length

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;
    }
  }
});

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

Answer 1

tbh，我不能真正遵循您的意图，但是基于注释，也许您想观看inputArray并根据其长度的变化执行代码。

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

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

1 个答案: