Binding the components with Vue (two-way v-model)

[HappyCerberus]

I'm running into a strange problem, where I can wrap the components into a Vue component, having it expose the current value, but the other direction doesn't seem to be working.

Notably, binding value to a reactive variable doesn't seem to work.

Playground

[HappyCerberus]

Testing this further, this seems to be some initialization issue. Further changes to the reactive value seem to propagate fine.

The same playground with an extra native textarea

[claviska]

It's been awhile since I've used Vue, but I'm seeing this in the playground:

Failed to resolve component: wa-textarea
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <Complabel="The text area follows:"modelValue="Hello World!"onUpdate:modelValue=fn>
at

I'm not sure what exactly Vue does to treat custom elements differently, but my guess is it's binding the value as a property before <wa-textarea> is registered. I'd start by setting isCustomElement() to see if that solves it.

isCustomElement: (tag) => tag.startsWith('wa-'),

I couldn't figure out where to add this in the playground. It looks like it's a Vite config now. 😕

If it is an initialization issue and the above doesn't solve it, please post back. We may need to add some guidance on how to register WA elements before Vue initializes or something.

/cc @KonnorRogers

[HappyCerberus]

I do have the isCustomElement config locally in my dev environment that doesn't fix it (and yeah, I also couldn't figure out how to set it up in the playground 😅).

[KonnorRogers]

@HappyCerberus Confirmed this is a bug in Web Awesome. I have it fixed and should hopefully be a part of the next Web Awesome alpha release.

In the mean time, if you really want to get this working today, I would do this:

<script setup lang="ts">
  import 'https://early.webawesome.com/[email protected]/dist/components/textarea/textarea.js';
  import { ref, onMounted } from 'vue'

  const textarea = ref(null)
  
interface InputEventTarget {
    value?: string
};

defineProps<{
    label?: string,
    inputmode?: string,
    disabled?: boolean
}>();

const text = defineModel<string>();


const updateValue = (e : Event) => {
    if (!e.target) return;
    const target = e.target as InputEventTarget;
    text.value = target.value;
};

onMounted(() => {
  textarea.value.value = text.value
})
</script>

<template>
  <wa-textarea ref="textarea" :label="label" :inputmode="inputmode" :disabled="disabled" resize="auto" :value="text" @wa-input="updateValue"></wa-textarea>
</template>

@claviska and I are going to be taking quite a bit of time to iron out these form control quirks and get a comprehensive test suite around this stuff.

[HappyCerberus]

@KonnorRogers Thanks for the workaround, but it doesn't seem to fix it for me. Playground

I should also mention that this isn't a problem with just the wa-textarea. I have the same issue with wa-input and wa-select, but I suspect this is a universal problem.