Inconsistent behavior with UTextarea, pinia, and v-model compared to UInput

[ryanuo]

Environment

• Operating System: Windows_NT
• Node Version: v18.19.1
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: pnpm@8.11.0
• Builder: -
• User Config: devtools, modules, tailwindcss, i18n, runtimeConfig
• Runtime Modules: @pinia/nuxt@0.5.1, @nuxt/ui@2.15.2-28557281.8d9d973, @nuxtjs/i18n@8.3.0, @vueuse/nuxt@10.9.0
• Build Modules: -

Version

npm:@nuxt/ui-edge@latest

Reproduction

    const coverInfoStore = useCoverInfoStore()

    <UInput v-model="coverInfoStore.coverTitle" />

Description

Problem: When using UTextarea component in conjunction with pinia and v-model, there is an inconsistency in behavior compared to using UInput.

Expected Behavior: Both UInput and UTextarea should behave consistently when used with pinia and v-model. Updates to the bound data should reflect immediately in both components.

Actual Behavior:

When updating the data bound to UInput using v-model, the changes are reflected immediately in the UI. However, when updating the data bound to UTextarea using v-model, the changes are not reflected immediately.

Additional context

Logs

No response

[moshetanzer]

Hi @rr210,

Please can you please provide a reproduction for us to help you.

When trying the following simple setup it seems to work;

<template>
  <div>
<UTextarea v-model="value.value" />
<UInput v-model="value.value" />

<UButton @click="addone">Change</UButton>
{{ value }}
</div>
</template>

<script setup>
function addone() {
  value.value.value += '!'
}
const value = ref({
  value: 'Hello'

})

</script>

[ryanuo]

Hi @rr210,

Please can you please provide a reproduction for us to help you.

When trying the following simple setup it seems to work;

<template>
  <div>
<UTextarea v-model="value.value" />
<UInput v-model="value.value" />

<UButton @click="addone">Change</UButton>
{{ value }}
</div>
</template>

<script setup>
function addone() {
  value.value.value += '!'
}
const value = ref({
  value: 'Hello'

})

</script>

I was using pinia to persist the data and the response was different, it felt like utextarea was trying not to update

[moshetanzer]

Can you provide a reproduction so we can try help? You can use a template from nuxt.new

[ryanuo]

Can you provide a reproduction so we can try help? You can use a template from nuxt.new您能否提供复制品以便我们尝试提供帮助？您可以使用 nuxt.new 中的模板

https://github.com/rr210/own-cover/tree/dev-test branch dev-test

code in components\CoverConfig.vue:77

After modifying the title text on the page and refreshing the page, you will find two different ones

[moshetanzer]

Hi @rr210,

In that branch there is no UInput above the UTextarea - when i do add one it works fine...

https://github.com/nuxt/ui/assets/82201261/424db49c-ff9c-4b88-9b90-8cb9d108ade4

[ryanuo]

Hi @rr210, 你好 ，

In that branch there is no UInput above the UTextarea - when i do add one it works fine...在该分支中，UTextarea 上方没有 UInput - 当我添加一个时，它工作正常......

Screen.Recording.2024-04-21.at.21.01.02.mov

Is it the dev-test branch？ I added a ref in the component in the master branch code, and it worked. You can try the dev-test branch; this can be reproduced.

[moshetanzer]

Yes

[ryanuo]

Yes

Is the video you mentioned above showcasing the dev-test branch?.....It's strange then.

[ryanuo]

reproduced

[moshetanzer]

@rr210 This link doesn't work

[ryanuo]

@rr210 This link doesn't work该链接无效

@moshetanzer here