[设置VueJS数组中对象的属性？

Question

因此，我列出了一个小清单，其中列出了一些汽车公司，以及供用户选择自己喜欢的公司的选项。我有一个对象数组，它返回名称和一个名为starred的特定属性。我有一种方法setStarred，它将选择的starred设置为true。但是我要达到的目标是一次只能选择一个，因此如果我选择BMW，则另两个已加星号的星标应切换为false。现在，我可以同时切换所有这些对象。

请检查此工作codepen。

查看下面的工作示例：-

new Vue({
  el: '#app',
  data() {
    return {
      cars: [{
          name: 'Toyota',
          starred: false
        },
        {
          name: 'BMW',
          starred: false
        },
        {
          name: 'Ford',
          starred: false
        }
      ]
    }
  },
  methods: {
    setStarred(item) {
      item.starred = !item.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" />
<link rel="stylesheet"  href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>

<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(car)">star_border
            </v-icon>
          </h2>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

任何帮助将不胜感激。谢谢。

Answer 1

您必须循环抛出其他数组项并将其starred属性设置为false。或者，您可以存储一个数据变量，以指示当前正在注视的对象的索引。

new Vue({
  el: '#app',
  data() {
    return {
      cars: [{
          name: 'Toyota',
          starred: false
        },
        {
          name: 'BMW',
          starred: false
        },
        {
          name: 'Ford',
          starred: false
        }
      ],
      lastStarredIndex: null
    }
  },
  methods: {
    setStarred(index) {
      if (this.lastStarredIndex === index) {
        // toggle same item
        this.cars[index].starred = !this.cars[index].starred;
        if (this.cars[index].starred) this.lastStarredIndex = index;
        else this.lastStarredIndex = null;
      } else {
      
          // disable last stared item
          if (this.lastStarredIndex !== null) this.cars[this.lastStarredIndex].starred = false;

          // set the new one
          this.cars[index].starred = true;
          
          this.lastStarredIndex = index;
       }
    }
  }
})

<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 rel="stylesheet"  href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>

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

Answer 2

不了解Vue最佳做法，但这可能会有帮助

new Vue({
  el: "#app",
  data() {
    return {
      cars: [
        {
          name: "Toyota",
          starred: false,
        },
        {
          name: "BMW",
          starred: false,
        },
        {
          name: "Ford",
          starred: false,
        },
      ],
    };
  },
  methods: {
    setStarred(item) {
      this.cars.forEach((car) => (car.starred = car.name === item.name));
    },
  },
});

<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 rel="stylesheet"  href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>

<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(car)">star_border
            </v-icon>
          </h2>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

Answer 3

new Vue({
  el: '#app',
  data() {
    return {
      cars: [{
          name: 'Toyota',
          starred: false
        },
        {
          name: 'BMW',
          starred: false
        },
        {
          name: 'Ford',
          starred: false
        }
      ]
    }
  },
  methods: {
    setStarred(item) {
      // Set all to false
      _.each(this.cars, function(value, key) {
          value.starred = false;
      });
      item.starred = true
    }
  }
})