切换对象属性VueJS？

Question

我有一个数组cars，它返回我的名字，他们每个人都有一个属性starred，我想来回切换真假。但是我想一次只为其中一个设置 starred 为 true 。所以我创建了一个方法setStarred，在方法内部，我使用 amap将其他设置为 false。但是，我可以将星号设置为 true，但是我无法将其设置回 false。请检查此Codepen这是工作示例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/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" /><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>本质上，我正在尝试将所选内容设置回 false。任何帮助将不胜感激。谢谢

Answer 1

尝试这个：

this.cars[index].starred = !this.cars[index].starred;

this.cars.map((i) => {

     if(i.name!=this.cars[index].name)

          i.starred = false;

});

Answer 2

我更喜欢先保存目标的“已加星标”状态，然后再切换它。

如果是这样，您不需要在 for 循环中放置一条if语句。虽然在这种情况下，它并没有大大提高性能，但我相信避免太多if from for-loop是一个好习惯。

下面是示例：

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/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" />

<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>