Question

所以我正在使用v-for来呈现元素列表。文本呈现在v芯片内部。该芯片具有一个包含图标的化身和一个包含文本的跨度。 prop : chipToggle上有一个span设置为隐藏/显示它。我正在尝试将onClick设置为true，将另一个设置为false。现在，两者都同时设置为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，其他设置为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>

VueJS在循环中为元素切换是/否？

1 个答案: