Как правильно связать CoreUI CSwitch?

Question

Я хочу использовать CSwitch внутри сетки данных DevExtreme. С DxSwitch все работает как положено, но я не могу заставить его работать с CSwitch. Я предполагаю, что я использую неправильную привязку, не так ли?

<template #width-settings="cell">
    <div>
        <DxSwitch v-model="cell.data.data.width.set" /> <!-- WORKS -->
        <input type="checkbox" v-model="cell.data.data.width.set" /> <!-- WORKS -->
        <CSwitch v-model="cell.data.data.width.set" /> <!-- DOESN'T WORK -->
        <div class="input-group input-group-sm" v-if="cell.data.data.width.set">
            ...
        </div>
    </div>
</template>

Почему не работает CSwitch?

Answer 1

v-model id только сокращенный синтаксис, который позволяет объединять: value и @input. Аналогично, someProp.syn c является сокращением для: prop и @update: someProp. CoreUI Vue использует .syn c, потому что он допускает двухстороннее связывание данных для многих реквизитов и делает API-интерфейс компонента явным (вы знаете имя реквизита, с которым вы связываете, на случай, если ИТ-модель od v может быть индивидуальной - кроме «значение»)

Answer 2

В отличие от других компонентов, CSwitch использует другой подход связывания. Привязка работает следующим образом:

<CSwitch :checked.sync="cell.data.data.width.set" />

Если вы удалите так называемый модификатор .sync, то привязка будет однонаправленной (= только для чтения). Милые незнакомцы ...