CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Somethingwhatever
Somethingwhatever

Reputation: 1358

Toggle object property VueJS?

I have an array cars which returns me the names and each of them has a property starred which i want to toggle true and false back and forth. However i want to set starred to true for only one of them at a time. So i created a method setStarred and inside the method, i am using a map to set others to false. However i am able to set the starred to true however i am not able to set it back to false.

Please check this Codepen

This is working example

new Vue({
  el: "#app",
  data() {
    return {
      cars: [{
          name: "Toyota",
          starred: false
        },
        {
          name: "BMW",
          starred: false
        },
        {
          name: "Ford",
          starred: false
        }
      ]
    };
  },
  methods: {
    setStarred(index) {
      this.cars.map((i) => {
        i.starred = false;
      });
      this.cars[index].starred = !this.cars[index].starred;
    }
  }
});
<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" />

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-layout justify-center column>
        <v-flex xs6 v-for="(car,index) in cars" :key="index">
          <h2>{{car.name}}
            <v-icon :color="car.starred ? 'primary': '' " @click="setStarred(index)">star_border
            </v-icon>
          </h2>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

Essentially i am trying to set the selected back to false. Any help will be appreciated. Thank you

Upvotes: 1

Views: 123

Answers (2)

Sphinx
Sphinx

Reputation: 10729

I prefer saving the 'starred' state of the target first, then toggle it later.

If so, you don't need to put one if statement in the for-loop. Though in this case, it doesn't improve the performance a lot, but I believe avoid too many if from for-loop is one good habit.

Below is the example:

new Vue({
  el: "#app",
  data() {
    return {
      cars: [{
          name: "Toyota",
          starred: false
        },
        {
          name: "BMW",
          starred: false
        },
        {
          name: "Ford",
          starred: false
        }
      ]
    };
  },
  methods: {
    setStarred(index) {
      let cur = this.cars[index].starred
      this.cars.forEach((i) => {
        i.starred = false;
      });
      this.cars[index].starred = !cur;
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.18/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" />

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-layout justify-center column>
        <v-flex xs6 v-for="(car,index) in cars" :key="index">
          <h2>{{car.name}}
            <v-icon :color="car.starred ? 'primary': '' " @click="setStarred(index)">star_border
            </v-icon>
          </h2>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

Upvotes: 1

Majed Badawi
Majed Badawi

Reputation: 28424

Try this:

this.cars[index].starred = !this.cars[index].starred;
this.cars.map((i) => {
     if(i.name!=this.cars[index].name)
          i.starred = false;
});

Upvotes: 1

Related Questions