如何正确绑定CoreUI c Switch？答案

【问题标题】：How to correctly bind CoreUI's CSwitch?如何正确绑定CoreUI c Switch？
【发布时间】：2020-07-03 18:07:26
【问题描述】：

我想在 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 不工作？

【问题讨论】：

标签： javascript html vue.js data-binding core-ui

【解决方案1】：

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

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

如果您删除所谓的.sync 修饰符，则绑定将是单向的（= 只读）。很奇怪...

【讨论】：

【解决方案2】：

v-model id 唯一的快捷语法，它允许结合 :value 和 @input。同样 someProp.sync 是 :prop 和 @update:someProp 的快捷方式。 CoreUI Vue 使用 .sync 是因为它允许对许多 props 进行两种数据绑定，并使组件 API 显式（您知道要绑定的 prop 的名称，以防 od v-model IT 可以自定义 - 除了“值” )

【讨论】：

感谢您的澄清。网上的例子太多了，原来的开发者只是用了这些东西，没有解释。