Closed vanling closed 1 month ago
https://github.com/nuxt/ui/commit/82313e862cbf21ae631156af4cd057f1383db634
i will try locally update: yes, { ...attrs, value: modelValue }"
overwrites the value it gets
edit: Im currently trying to work around this by just using the v-model
Related issue and pr: https://github.com/nuxt/ui/issues/1996 - https://github.com/nuxt/ui/pull/2047
I think this is the reason my u-input no longer works with a controller like zag-js. I need it for tags Input, pin input and others.
You should use a v-model
like described on: https://ui.nuxt.com/dev/components/input. If you want more control you can use model-value
and @update:model-value
: https://vuejs.org/guide/extras/render-function.html#v-model
But my zag-js is broken @benjamincanac 🥲. What do I do?
<u-input
v-bind="api.getInputProps()"
size="sm"
:color
:placeholder
:autofocus
:disabled
:required />
This used to work.
@romhml What do you think? I don't see how https://github.com/nuxt/ui/pull/2047/files could have broken this? 🤔
Thanks @benjamincanac, The option to use value, for me was an undocumented "feature" that I loved. But you are right, in my case using modelValue would do the trick
Might be that overwriting attrs.value, that was introduced in https://github.com/nuxt/ui/pull/2047, with empty/unused modelValue could break things for more people who thought this worked before, and like me thought it was sort of an replacement. Same for this guy in https://github.com/nuxt/ui/issues/2104 people think html input attributes can be used.
Changed mine to, worked great.
<UInput
:model-value="name"
@update:model-value="(value) => $emit('update:name', value)"
/>
Also tried the v-model, but needs computed values for the props, which worked, but i like the :model-value a bit more.
<UInput v-model="name" />
---
const name = computed({
get: () => props.name,
set: value => $emit('update:name', value),
})
But my zag-js is broken. What do I do?
<u-input v-bind="api.getInputProps()" :required />
This used to work.
@tobychidi you could try to pick the value from api.getInputProps()
and use that as a model-value.
@benjamincanac since value=
cant be used but other html-input attributes like autocomplete=
can. Shall i make a pr for documentation change?
adding this
::callout{icon="i-heroicons-exclamation-triangle-20-solid"}
We recommend using `v-model` for managing the input's reactivity. However, if needed, you cannot bind the input value using `:value`. Instead, bind the input value using `:model-value` and listen for changes using `@update:model-value` to ensure proper reactivity and updates.
::
or
We recommend using `v-model` for reactivity. If needed, use `:model-value` and `@update:model-value` instead of `:value` for proper updates.
I don't think it's necessary as it's written all over the docs to use v-model
or model-value
already and nowhere to use :value
.
Ok 👍 , Then i hope this post will help other people who think they can use every html attribute/prop except value.
example:
When using nuxt UI v2.18.5 or higher -> <UInput value="'12714274'" readonly />
change it to <UInput :model-value="'12714274'" readonly />
tldr
When using nuxt UI v2.18.5 or higher ->
<UInput value="'12714274'" readonly />
change it to<UInput :model-value="'12714274'" readonly />
Version
edit: v2.18.5
Reproduction
https://stackblitz.com/edit/nuxt-ui-uds7la?file=app.vue
Description
So i have a few grouped form inputs and noticed all values being empty since last update, reverted back to 2.18.4 and worked again.
(👀 or you can tell me im using it wrong)
Why i am using :value= ?
and using
Additional context
No response
Logs
edit: added repro edit: pinpointed on 2.18.5, this happened between 18.4 and 18.5