Toggle object property VueJS?

Question

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

No it doesn't. You can't set the same one back to false.

Somethingwhatever
– Somethingwhatever

2020-07-02 18:16:08 +00:00
Commented Jul 2, 2020 at 18:16 — Somethingwhatever
– Somethingwhatever, Commented Jul 2, 2020 at 18:16

Majed Badawi · Accepted Answer · 2020-07-02 18:14:38Z

1

Try this:

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

answered Jul 2, 2020 at 18:14

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Somethingwhatever Over a year ago

Nicee!! Thank you. Accepting it when the timer ends.

Sphinx · Accepted Answer · 2020-07-02 18:24:27Z

1

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>

edited Jul 2, 2020 at 18:24

answered Jul 2, 2020 at 18:20

Sphinx

10.7k2 gold badges35 silver badges50 bronze badges

1 Comment

Somethingwhatever Over a year ago

Thank you for the answer!! it's a pretty cool way of tackling the problem.

Collectives™ on Stack Overflow

Toggle object property VueJS?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related