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

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-model 正在填充 MyComponent.vue:

user:Reactive
   name:"d"

我看到的问题是该值被我最后键入的值所替换。例如，如果我输入文本“abcd”，v-模型中只会显示“d”。

如何发出整个值以便显示“abcd”？

user:Reactive
   name:"abcd"

Answer 1

问题是 <input> 没有模型。它仅将其 value 属性绑定到本地 value 引用，该引用可能最初为空白或 null，并且该引用永远不会更新。

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

但看起来该组件并非旨在根据发出的内容修改 value ref（例如，过滤掉字符），因此它不需要保留本地副本它。

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

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

<input :value="modelValue"> ✅

demo

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

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

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

How can I emit the entire value of a text input?

vue.js

vuejs3