Vuejs - 当复选框为 checked/unchecked 时如何更改属性的值并更新相同的值

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

由于复选框仅指示它是否被 select 编辑，因此您不能 select 只有一个复选框的多个值，但是您可以使用您的汽车对象来呈现选项：

<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，现在您会看到带有 select 离子的汽车对象。值得注意的是，我更改了汽车对象，因此它包含汽车名称和 true/false for selected.

Vuejs - 当复选框为 checked/unchecked 时如何更改属性的值并更新相同的值

Vuejs - How do I change the property's value when Checkbox is checked/unchecked and update the same

checkbox

binding

input

vue.js

Vuejs - 当复选框为 checked/unchecked 时如何更改 属性 的值并更新相同的值

Vuejs - How do I change the property's value when Checkbox is checked/unchecked and update the same

checkbox

binding

input

vue.js

Vuejs - 当复选框为 checked/unchecked 时如何更改属性的值并更新相同的值