CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
user11606914
user11606914

Reputation:

VueJS toggle true/false for elements in a loop?

So i am using v-for to render a list of elements. The text is rendered inside a v-chip. The chip has an avatar which holds the icon and a span which hold the text. There is a prop : chipToggle set on span which hides/shows it. What i am trying to do is onClick set the selected to true and the other to false. Right now both get set to true/false simultaneously.

This is sample pen

This is my sample code:-

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/[email protected]/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

So essentially whichever i select should be set to true and the other(s) to be set to false. Thank you.

Upvotes: 1

Views: 1264

Answers (1)

Anurag Srivastava
Anurag Srivastava

Reputation: 14423

For your array, use a data structure like { value: this.inputValue, toggled: true } where each element stores its own toggled value. See below code:

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/[email protected]/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 1

Related Questions