bug: GCDS + Vue -- GCDS components do not respect v-model directive

[simberman-gc]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

GCDS Components Package and Version

[email protected]

Current Behavior

GCDS components do not respect Vue's v-model macro.

When the customElement configuration is set upstream in the Vite compiler (see /vite.config.ts in the supplied reproduction), then the GCDS component will accept a new value from the ref. If you remove the argument inside vue(), then you will see that the GCDS component with v-model is completely non-functional.

Expected Behavior

When I use the v-model directive with a GCDS component, I expect the component to be "bound" to the Vue ref (v-model automatically implements the one-way data binding and also the change handler which modifies the data ref).

System Info

All browsers and platforms, Vue >= 3.4.

Steps to Reproduce

See the last part of the attached code reproduction.

Code Reproduction URL

https://stackblitz.com/edit/dfo-gcds-v-model?file=src%2FApp.vue

Additional Information

I am guessing that for stenciljs you need to explicitly set the componentModels config, though I am not sure if this would force you to create a special package for Vue, etc. See: https://stenciljs.com/docs/vue#componentmodels

[ethanWallace]

Hey @simberman-gc, we have just released a new package @cdssnc/gcds-components-vue that will hopefully solve the issues you are having and allow the GC Design System components to integrate easily within Vue.

[lewis-rannells]

Hello, I have been exploring the component library and have run into what I believe is the same issue. I am trying to use two-way binding with the v-model property in Vue. I have an example using gcds-checkbox and gcds-input here:

https://stackblitz.com/edit/vitejs-vite-vmu2f2?file=src%2FApp.vue

Am I doing something incorrectly?

Example code for quick reference:

<script setup>
import { ref } from 'vue'
const checkboxValue = ref(false)
</script>

<template>
<gcds-checkbox
    checkbox-id="checkbox-default"
    label="CheckboxLabel"
    name="checkbox"
    hint="Description or example to make the option clearer."
    v-model="checkboxValue"
    >
</gcds-checkbox>
</template>

EDIT: Originally this post referred to using value. I switched to using v-model, which works for gcds-input and gcds-select. It does not seem to work for gcds-checkbox though, which was the original example I provided. I can open a separate issue for this if needed.

[ethanWallace]

Thanks for flagging this issue @lewis-rannells. If you could create a new issue for the checkbox v-model, that would be great. This will allow us to prioritize the issue.

Thanks.