Ionic Vue Checkboxes

Question

I have the following Problem:

I'm using Ionic Vue and a VueX Store to save my data from an API. Now I have set an array, which contains the IDs of entries, which shall be checked or unchecked.

Since I should not modify the API-Model class, I have saved the IDs of checked entries in a seperate Array in my VueX Store, which I update as needed. Now I'm trying to make the checkboxes checked / unchecked depending on that array. I tried it by adding v-model = "checkedVehicles.included(vehicle.vehicle_id)", but all I get is an Error:

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

Heres the Part whit the checkboxes, hope that is all you need:)

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

The checkedVehicles Arrays is intialized as String[]. Also tried to use a function, which returns true or false, depending on the checkedVehicles Array has the ID included or not, but that also gives the same error The other functions, which add or remove entires to the correspondig arrays are working fine, already checked that. only the Checkboxes are not working as intended.

Has anyone a clue, what I'm doing wrong?

Answer 1

This is obvious because we can't evaluate a condition in v-model. We generally bind a variable to the v-model. For eg: Consider you have a attr called vehicle in data.

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

then you can bind it as

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

To conclude, variables that can hold value can only be used in v-model