如何正确绑定CoreUI的CSwitch？

Question

我想在DevExtreme数据网格内使用CSwitch。使用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

与其他组件相比，``CSwitch`使用另一种绑定方法。绑定的工作方式如下：

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

如果删除所谓的.sync修饰符，则绑定将是单向的（=只读）。漂亮的扼杀...

Answer 2

v-model id仅是快捷方式语法，它允许将：value和@input结合使用。同样，someProp.sync是：prop和@update：someProp的快捷方式。 CoreUI Vue使用.sync是因为它允许许多道具的双向数据绑定，并使组件API明确（您知道要绑定的道具的名称，以防od v-model IT可能是自定义的-除了“值” ）