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

【问题标题】：How to use :value and v-model together in input如何在输入中一起使用 :value 和 v-model
【发布时间】：2020-03-13 14:21:14
【问题描述】：

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

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

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

有解决问题的建议吗？

【问题讨论】：

标签： html vue.js

【解决方案1】：

TL;DR

v-model="id"

做同样的事情

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

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

<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"

两次

【讨论】：