我的組件.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”，則只有“d”會顯示在 v-model 中。
如何發出整個值以便“abcd”顯示？
user:Reactive
name:"abcd"
uj5u.com熱心網友回復：
問題是<input>沒有模型。它僅將其value屬性系結到本地valueref，該本地 ref 最初可能為空白或null，并且該 ref 永遠不會更新。
-eventinput發出<input>元素的當前值，并附加新輸入的字符。由于在這種情況下當前值始終為空白，因此事件資料僅包含新字符。
但看起來該組件并非旨在value根據發出的內容修改 ref（例如，過濾掉字符），因此它不需要保留它的本地副本。
洗掉不必要的valueref 并將<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" />
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/442214.html
上一篇：Vuex商店無法訪問
下一篇：Vue.jsv-model未拾取