Home » vue » How to correctly bind CoreUI's CSwitch?

How to correctly bind CoreUI's CSwitch?

Posted by: admin November 26, 2021 Leave a comment

Questions:

I want to use the CSwitch inside a DevExtreme data grid. With the DxSwitch, everything works as expected, but I can’t make it work with the CSwitch. I guess, that I’m using the wrong binding, don’t I?

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

Why doesn’t the CSwitch work?

Answers:

In contrast to the other components, “CSwitch` uses another binding approach. The binding works as follows:

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

If you remove the so called .sync modifier, then the binding will be unidirectional (= read only). Pretty strangs …

###

v-model id only shortcut syntax, which allows to combine :value and @input. Similarly someProp.sync is shortcut for :prop and @update:someProp. CoreUI Vue uses .sync because its allows for two way data binding for many props, and make component API explicit (you know the name of the prop you are binding, in case od v-model IT could be custom – other than ‘value’)