如何发出文本输入的整个值？

Question

MyComponent.vue：

<BaseInput
    id="name"
    v-model:modelValue="user.name"
    type="text"
    label="Name"
    name="name"
    placeholder="Name"
/>

BaseInput.vue：

<template>
<input
    :id="id"
    class="peer absolute block w-full border-0 bg-transparent p-0 px-3 text-base text-purple-500 placeholder-orange-500 transition-all duration-100 ease-in-out focus:ring-0 sm:text-sm"
    :class="inputHasValue ? 'top-5' : 'top-3'"
    :type="type"
    :name="name"
    :placeholder="placeholder"
    :value="value"
    @input="(event) => $emit('update:modelValue', event.target.value)"
    @focus="handleInputFocus"
    @keyup="handleInputKeyup"
/>
...
</template>


<script>
...
emits: ['update:modelValue'],
...
</script>

这里的情况很好。当我输入输入时，我可以看到v模型是在MyComponent.vue中填充的。

user:Reactive
   name:"d"

我看到的问题是，这个值正在被我最后输入的任何东西所取代。例如，如果我输入文本"abcd“，只有"d”会显示在v-模型中。

我如何发出整个值，以便"abcd“显示？

user:Reactive
   name:"abcd"

Answer 1

问题是<input>没有模型。它只将其value属性绑定到本地value ref，该本地ref很可能最初为空白或null，并且该ref从未更新。

input-event发出<input>元素的当前值，并附加新输入的字符。由于当前值在这种情况下总是为空，因此事件数据只包含新字符。

但是，该组件似乎不是根据发出的内容(例如，筛选出字符)来修改value引用的，因此它不需要保留它的本地副本。

删除不必要的value引用并将<input>的value直接绑定到modelValue将解决这个问题：

<!-- <input :value="value"> --> ❌

<input :value="modelValue"> ✅

演示

附带注意：v-model:modelValue可以简化为v-model，因为"modelValue"是默认的绑定参数：

<BaseInput v-model:modelValue="user.name" />
<!-- is the same as: -->
<BaseInput v-model="user.name" />