如何发出文本输入的全部值

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属性绑定到本地valueref，该ref最初可能为空或null，并且该ref从未更新。

input-事件发出<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" />