VueJS为循环中的元素切换真/假？

Question

所以我使用v-for 来呈现元素列表。文本在 v-chip 内呈现。该芯片有一个包含图标的头像和一个包含文本的跨度。 span 上有一个 prop : chipToggle 设置，它隐藏/显示它。我想要做的是onClick 将选中的设置为true，另一个设置为false。现在两者都同时设置为真/假。

这是示例pen

这是我的示例代码：-

new Vue({
  el: "#app",
  data() {
    return {
      inputValue: "",
      myArray: [],
      showText: true,
      selected: "",
      chipToggle: false
    };
  },
  methods: {
    createArray() {
      this.myArray.unshift(this.inputValue);
      this.inputValue = "";
      console.log(this.myArray);
    },
    clear() {
      this.inputValue = "";
      this.myArray = [];
      console.log(this.myArray);
    },
    onSelect(item) {
      console.log((this.selected = item));
    },
    toggleDisplay(item) {
      this.onSelect();
      this.chipToggle = !this.chipToggle;
    }
  }
});

<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" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />

<div id="app">
  <v-app id="inspire">
    <v-layout justify-center>
      <v-flex xs6>
        <v-text-field v-model="inputValue">
        </v-text-field>
        <v-btn :disabled="inputValue === ''" @click="createArray">Click Me</v-btn>
        <v-btn @click="clear">Clear</v-btn>
        <v-layout row v-if="myArray.length > 0">
          <v-flex v-for="(item,i) in myArray">
            <v-chip @click="onSelect(item)">
              <v-avatar>
                <v-icon @click="toggleDisplay(item)">account_circle</v-icon>
              </v-avatar>
              <span v-if="chipToggle">{{item}}</span>
            </v-chip>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
  </v-app>
</div>

所以基本上我选择的任何一个都应该设置为 true，而其他（s）设置为 false。谢谢。

Answer 1

对于您的数组，请使用像 { value: this.inputValue, toggled: true } 这样的数据结构，其中每个元素都存储自己的切换值。见以下代码：

new Vue({
  el: "#app",
  data() {
    return {
      inputValue: "",
      myArray: [],
      showText: true,
      selected: ""
    };
  },
  methods: {
    createArray() {
      this.myArray.unshift({ value: this.inputValue, toggled: false });
      this.inputValue = "";
      console.log(this.myArray);
    },
    clear() {
      this.inputValue = "";
      this.myArray = [];
      console.log(this.myArray);
    },
    onSelect(item) {
      this.selected = item;
    },
    toggleDisplay(item) {
      this.myArray.forEach(el => el.toggled = false);
      item.toggled = 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" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />

<div id="app">
  <v-app id="inspire">
    <v-layout justify-center>
      <v-flex xs6>
        <v-text-field v-model="inputValue">
        </v-text-field>
        <v-btn :disabled="inputValue === ''" @click="createArray">Click Me</v-btn>
        <v-btn @click="clear">Clear</v-btn>
        <v-layout row v-if="myArray.length > 0">
          <v-flex v-for="(item,i) in myArray">
            <v-chip @click="onSelect(item)">
              <v-avatar>
                <v-icon @click="toggleDisplay(item)">account_circle</v-icon>
              </v-avatar>
              <span v-if="item.toggled">{{item.value}}</span>
            </v-chip>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
  </v-app>
</div>