fix(CFormCheck): the component is not checked/picked when the v-model value is set

Author: mrholek

packages/coreui-vue/src/components/form/CFormCheck.ts

@@ -189,7 +189,7 @@ const CFormCheck = defineComponent({
     const formControl = () => {
       return h('input', {
         ...attrs,
-        ...(props.modelValue && props.value && { checked: isChecked.value }),
+        ...((props.modelValue || props.value) && { checked: isChecked.value }),
         class: inputClassName,
         id: props.id,
         indeterminate: props.indeterminate,
@@ -259,4 +259,4 @@ const CFormCheck = defineComponent({
   },
 })
 
-export { CFormCheck }
+export { CFormCheck }

packages/docs/forms/checkbox.md

@@ -20,6 +20,74 @@ Browser default checkboxes are replaced with the help of `<CFormCheck>`. Checkbo
 <CFormCheck id="flexCheckChecked" label="Checked checkbox" checked />
 ```
 
+### vModel
+
+Single checkbox, boolean value.
+
+::: demo
+<CFormCheck id="flexCheckDefaultVModel" label="Default checkbox" v-model="checked" />
+<div>Checked: {{checked}}</div>
+:::
+```vue
+<template>
+  <CFormCheck id="flexCheckDefaultVModel" label="Default checkbox" v-model="checked" />
+  <div>Checked: {{checked}}</div>
+</template>
+<script>
+  import { ref } from 'vue'
+  export default {
+    setup() {
+      const checked = ref(true)
+      return {
+        checked
+      }
+    }
+  }
+</script>
+```
+
+We can also bind multiple checkboxes to the same array.
+
+::: demo
+<CFormCheck id="lucas" value="Lucas" label="Lucas" v-model="checkedNames"/>
+<CFormCheck id="andrew" value="Andrew" label="Andrew" v-model="checkedNames"/>
+<CFormCheck id="anna" value="Anna" label="Anna" v-model="checkedNames"/>
+<div>Checked names: {{checkedNames}}</div>
+:::
+```vue
+<template>
+  <CFormCheck id="lucas" value="Lucas" label="Lucas" v-model="checkedNames"/>
+  <CFormCheck id="andrew" value="Andrew" label="Andrew" v-model="checkedNames"/>
+  <CFormCheck id="anna" value="Anna" label="Anna" v-model="checkedNames"/>
+  <div>Checked names: {{checkedNames}}</div>
+</template>
+<script>
+  import { ref } from 'vue'
+  export default {
+    setup() {
+      const checkedNames = ref(['Andrew'])
+      return {
+        checkedNames
+      }
+    }
+  }
+</script>
+```
+
+<script>
+  import { ref } from 'vue'
+  export default {
+    setup() {
+      const checked = ref(true)
+      const checkedNames = ref(['Andrew'])
+      return {
+        checked,
+        checkedNames
+      }
+    }
+  }
+</script>
+
 ## Indeterminate
 
 Checkboxes can utilize the `:indeterminate` pseudo-class when manually set via `indeterminate` property.
@@ -32,7 +100,7 @@ Checkboxes can utilize the `:indeterminate` pseudo-class when manually set via `
 <CFormCheck id="flexCheckIndeterminate" label="Indeterminate checkbox" indeterminate />
 ```
 
-### Disabled
+## Disabled
 
 Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.
 

packages/docs/forms/radio.md

@@ -22,6 +22,50 @@ Add the `disabled` attribute and the associated `<label>`s are automatically sty
 <CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault2" label="Checked radio" checked/>
 ```
 
+### vModel
+
+::: demo
+<CFormCheck type="radio" id="flexRadioVModel1" inline label="One" value="One" v-model="picked"/>
+<CFormCheck type="radio" id="flexRadioVModel2" inline label="Two" value="Two" v-model="picked"/>
+<CFormCheck type="radio" id="flexRadioVModel2" inline label="Three" value="Three" v-model="picked"/>
+<CFormCheck type="radio" id="flexRadioVModel2" inline label="Four" value="Four" v-model="picked"/>
+<CFormCheck type="radio" id="flexRadioVModel2" inline label="Five" value="Five" v-model="picked"/>
+<div>Picked: {{ picked }}</div>
+:::
+```vue
+<template>
+  <CFormCheck type="radio" id="flexRadioVModel1" inline label="One" value="One" v-model="picked"/>
+  <CFormCheck type="radio" id="flexRadioVModel2" inline label="Two" value="Two" v-model="picked"/>
+  <CFormCheck type="radio" id="flexRadioVModel2" inline label="Three" value="Three" v-model="picked"/>
+  <CFormCheck type="radio" id="flexRadioVModel2" inline label="Four" value="Four" v-model="picked"/>
+  <CFormCheck type="radio" id="flexRadioVModel2" inline label="Five" value="Five" v-model="picked"/>
+  <div>Picked: {{ picked }}</div>
+</template>
+<script>
+  import { ref } from 'vue'
+  export default {
+    setup() {
+      const picked = ref('Four')
+      return {
+        picked
+      }
+    }
+  }
+</script>
+```
+
+<script>
+  import { ref } from 'vue'
+  export default {
+    setup() {
+      const picked = ref('Four')
+      return {
+        picked
+      }
+    }
+  }
+</script>
+
 ### Disabled
 
 ::: demo