bug: Vue `v-model` no longer working as expected

dgonzalezr commented 3 weeks ago

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.

Stencil Version

4.22.2

Stencil Framework Output Target

Vue

Stencil Framework Output Target Version

0.9.0

Current Behavior

The v-model bidding is not working as expected, even if the Vue model config is correctly set. For example, consider the following in the components/Input.vue of the vue-app example in this repo

// Some code has been removed below to simplify things
<script>
import { defineComponent, ref } from 'vue';
import { MyInput } from 'component-library-vue';

export default defineComponent({
  name: 'Input',
  components: {
    MyInput,
  },
  setup() {
    const inputValue = ref('Input value');

    const handleChange = (ev) => {
      console.log('Input value changed', inputValue.value);
    };

    return {
      inputValue,
      handleChange,
    };
  },
});
</script>

<style scoped>
.inputResult {
  color: green;
}
</style>

<template>
  <div>
    <MyInput
      @myChange="handleChange"
      v-model="inputValue"
    >
    </MyInput>
    <div class="inputResult">
      <p>Input Value: {{ inputValue }}</p>
    </div>
  </div>
</template>

As you can see above, we have defined an inputValue model bound to the MyInput stencil component. Normally, when the handleChange is triggered, this model value should be updated accordingly with the MyInput value. But unfortunately, this is not happening.

Expected Behavior

Components v-model should be updated when the event that should update the model value is triggered. Here is how this normally work with a native HTML input:

<script setup lang="ts">
import { ref } from 'vue'

const name = ref('John Doe')

const handleName = () => {
  console.log(`Name model value: ${name.value}`)
}
</script>

<template>
  <input type="text" v-model="name" @change="handleName" />
  <p>Name model value: {{ name }}</p>
</template>

Steps to Reproduce

In the example-project/vue-app/src/components/Input.vue of this repo:

Define a model value:
```
const inputValue = ref('Input value');
```

Bind the model to MyInput:

<MyInput
@myInput="handleInput"
@myChange="handleChange"
v-model="inputValue"
>

Check that the model value is updated once the handleChange method is triggered:

const handleChange = (ev) => {
console.log('Input model value', inputValue.value);
// ...
};

Code Reproduction URL

https://github.com/ionic-team/stencil-ds-output-targets/blob/main/example-project/vue-app/src/components/Input.vue#L44

Additional Information

This used to work with version 0.8.9 of @stencil/vue-output-target, at least with the raw web components in a Vue app, now, it doesn't work at all. More details about this in the past can be found in the Discord channel:

ionitron-bot[bot] commented 3 weeks ago

Thanks for the issue!

This project is currently maintained for the purposes of supporting Ionic Framework. At this time, only new issues & pull requests that support Ionic Framework will be prioritized. For the latest updates regarding the maintenance status of this project, please see this section of the project's README

ionitron-bot[bot] commented 3 weeks ago

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort. Thank you!

christian-bromann commented 3 weeks ago

Thanks for raising an issue. I am not sure when I get the time to look at this so any help is welcome. We recently made some changes to the Vue output target to add support for SSR. This seems to have created a regression.

dgonzalezr commented 3 weeks ago

Thank you for the comment @christian-bromann. I wish I could help here but I'm not sure where to start or look to fix it 😞

ionic-team / stencil-ds-output-targets