Vuejs - 选中/取消选中复选框时如何更改属性值并更新相同

Question

我有两个组件，我正在尝试更新组件，并且我正在尝试根据选中或未选中的复选框更改属性值。我无法更改该属性的值。

这是我的代码：

ComponentA.vue

 **Template**

 <div class="column" v-for="car in cars">
    <label class="label">
      <input type="checkbox" v-model="carsSelected" @change="onChange" >
      {{ car }}
    </label>
  </div>

  **Script**

    data () {
       return {
         carsSelected: {},
         cars: {
          hyundai,
          maruthi,
          audi,
        }
      }
      ...
        onChange(){
      this.$emit('input', this.carsSelected)   .--->  For updating
    }

ComponenrB.vue

     <component-a v-model="fourWheeler.brands" />
     ...
     fourWheeler: {}

fourWheeler.brands 的外观如下：

     **It is an object**
       
       {
         hyundai: false,
         maruti: false,
         audi: true,
       }

我想根据选中或未选中更改汽车品牌的值，即fourWheeler.brands，如果未选中复选框则为false，如果选中则为true。请让我知道如何更新值和更好的绑定方式。

Answer 1

由于复选框仅指示是否选中，因此您不能仅使用一个复选框选择多个值，但是您可以使用您的汽车对象来呈现选项：

<template>
  <main>
   <label v-for="(value,key) in cars" :key="key" :for="key">
     {{key}}
     <input  type="checkbox" :id="key" v-model="cars[key]" @change="onChange"/>
   </label>
 </main>
</template>

<script>
 export default {
  data(){
   return {
     cars: {
         hyundai:false,
         maruthi:false,
         audi:false,
     }
   }
 },
 methods:{
   onChange(){
     console.log(this.cars)
   }
 }
 }
</script>

如您所见，我正在遍历汽车属性并为每个属性（每辆汽车）显示一个复选框，然后 v-model 正在更改汽车对象的特定属性，所以如果您这样做onChange 中汽车对象的 console.log 现在您可以看到带有选择的汽车对象。值得注意的是，我更改了汽车对象，因此它包含汽车名称和选定的真/假。