如何在输入中一起使用 :value 和 v-model

Posted 2023-02-22

【中文标题】如何在输入中一起使用 :value 和 v-model

【英文标题】：How to use :value and v-model together in input

【发布时间】：2020-03-13 14:21:14

【问题描述】：

我正在尝试将初始值设置为 v-model，其中 id 已在 data 中声明。但是编译的时候会报错。

<input clearable
       v-model="id"
       :value="id"
       @keydown="isNumber"
       autofocus/>

:value="id" 在同一元素上与 v-model 冲突，因为后者已经在内部扩展为值绑定

有解决问题的建议吗？

【问题讨论】：

删除:value="id"

@Bravo 我需要带有初始值的input 字段吗？如果我删除:value="id"，如何为v-model="id" 赋值？

您可以在数据属性中为id 分配一个默认值

错误信息准确地告诉你我在下面的回答中所说的内容：即 后者（即 v-model）在内部扩展为值绑定

【参考方案1】：

TL;DR

v-model="id"

做同样的事情

:value="id"
@input="id = $event.target.value"

因此您不需要添加:value=id，它已经“存在”

---

来自documentation

<input v-model="searchText">

做同样的事情：

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

所以...您正在尝试执行以下操作

<input
    clearable

    v-bind:value="id"
    v-on:input="id = $event.target.value"

    :value="id"
    @keydown="isNumber"
    autofocus
>

现在因为:value="id" 是shorthand 对应v-bind:value="id"，你现在可以看到你正在尝试做

v-bind:value="id"

两次