Ionic Vue 复选框

Question

我有以下问题：

我正在使用 Ionic Vue 和 VueX Store 从 API 中保存我的数据。现在我已经设置了一个数组，其中包含条目的ID，应该检查或不检查。

因为我不应该修改 API-Model class，所以我将选中条目的 ID 保存在我的 VueX Store 中的单独数组中，我会根据需要更新它。现在我正在尝试根据该数组选中/取消选中复选框。我通过添加 v-model = "checkedVehicles.included(vehicle.vehicle_id)" 来尝试，但我得到的只是一个错误：

'v-model' directives require the attribute value which is valid as LHS vue/valid-v-model

这是带有复选框的部分，希望这就是您所需要的:)

<IonItem v-for="vehicle in vehicleList" v-bind:key="vehicle.vehicle_id">
        <IonLabel>
          <h2>{{ vehicle.manufacturer }} {{ vehicle.model }}</h2>
          <p>{{ vehicle.display_name }}</p></IonLabel>
        <IonCheckbox slot="end"
                     v-model="checkedVehicles.includes(vehicle.vehicle_id)"
                     @click="checkIfAllDeselected"
                     @update="this.updateCheckboxOnClick(vehicle.vehicle_id)"/>
      </IonItem>

checkedVehicles 数组被初始化为 String[]。还尝试使用一个函数，returns true 或 false，具体取决于 checkedVehicles Array 是否包含 ID，但这也会产生相同的错误其他向对应数组添加或删除整体的功能工作正常，已经检查过了。只有复选框没有按预期工作。

有人知道我做错了什么吗？

Answer 1

这很明显，因为我们无法在 v-model 中评估条件。我们一般给v-model绑定一个变量。例如：假设您在数据中有一个名为 vehicle 的属性。

data() {
return {
Vehicle list: [{
 checked: true,
 manufacturer: '',
 display_name: '',
 vehicle_id: ''
},
{
 checked: true,
 manufacturer: '',
 display_name: '',
 vehicle_id: ''
},
]
}

那么你可以绑定为

<IonItem v-for="vehicle in vehicleList" v-bind:key="vehicle.vehicle_id">
        <IonLabel>
          <h2>{{ vehicle.manufacturer }} {{ vehicle.model }}</h2>
          <p>{{ vehicle.display_name }}</p></IonLabel>
        <IonCheckbox slot="end"
                     v-model="vehicle.checked"
                     @click="checkIfAllDeselected"
                     @update="this.updateCheckboxOnClick(vehicle.vehicle_id)"/>
      </IonItem>

综上所述，能存值的变量只能在v-model中使用

Ionic Vue 复选框

Ionic Vue Checkboxes

ionic-framework

vue.js

vuex