切换对象属性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) => {&nbsp; &nbsp; &nbsp;if(i.name!=this.cars[index].name)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; i.starred = false;});

Answer 2

我更喜欢先保存目标的“已加星标”状态，然后再切换它。如果是这样，您不需要在 for 循环中放置一条if语句。虽然在这种情况下，它并没有大大提高性能，但我相信避免太多if from for-loop是一个好习惯。下面是示例：new Vue({&nbsp; el: "#app",&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; cars: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: "Toyota",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; starred: false&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: "BMW",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; starred: false&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: "Ford",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; starred: false&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; };&nbsp; },&nbsp; methods: {&nbsp; &nbsp; setStarred(index) {&nbsp; &nbsp; &nbsp; let cur = this.cars[index].starred&nbsp; &nbsp; &nbsp; this.cars.forEach((i) => {&nbsp; &nbsp; &nbsp; &nbsp; i.starred = false;&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; this.cars[index].starred = !cur;&nbsp; &nbsp; }&nbsp; }});<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">&nbsp; <v-app id="inspire">&nbsp; &nbsp; <v-container>&nbsp; &nbsp; &nbsp; <v-layout justify-center column>&nbsp; &nbsp; &nbsp; &nbsp; <v-flex xs6 v-for="(car,index) in cars" :key="index">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>{{car.name}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-icon :color="car.starred ? 'primary': '' " @click="setStarred(index)">star_border&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </v-icon>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h2>&nbsp; &nbsp; &nbsp; &nbsp; </v-flex>&nbsp; &nbsp; &nbsp; </v-layout>&nbsp; &nbsp; </v-container>&nbsp; </v-app></div>