Ionic Vue 체크박스

Ionic Vue 체크박스

다음과 같은 문제가 있습니다.

API에서 데이터를 저장하기 위해 Ionic Vue와 VueX Store를 사용하고 있습니다.이것으로, 체크 또는 오프할 엔트리의 ID를 포함한 배열을 설정했습니다.

API-Model 클래스를 수정하지 않기 때문에 체크된 엔트리의 ID를 VueX Store의 별도 배열에 저장하여 필요에 따라 업데이트합니다.이제 해당 어레이에 따라 체크박스를 켜거나 끄려고 합니다.v-model = "checkedVehicles.included(차량)"를 추가하여 시도했습니다.vehicle_id)), 하지만 오류만 표시됩니다.

'v-model' 디렉티브에는 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[]으로 초기화됩니다.또한 선택된 차량 배열에 ID가 포함되어 있는지 여부에 따라 true 또는 false를 반환하는 함수를 사용하려고 시도했지만 동일한 오류를 발생시킵니다. 해당 배열에 엔티어를 추가하거나 제거하는 다른 함수는 이미 올바르게 작동하고 있습니다.확인란만 제대로 작동하지 않습니다.

내가 뭘 잘못하고 있는지 아는 사람?

v-model에서는 조건을 평가할 수 없기 때문에 이는 명백합니다.일반적으로 v-model에 변수를 바인딩합니다.예: 데이터에 차량이라는 특성이 있다고 가정합니다.

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-모형에서만 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/65750029/ionic-vue-checkboxes