在 <input> 中一起使用 :value 和 v-model 的正确方法是什么答案

【问题标题】：What is the right way to use :value and v-model together in a <input>在 <input> 中一起使用 :value 和 v-model 的正确方法是什么
【发布时间】：2019-07-01 00:15:45
【问题描述】：

这是我的错误代码：

<input v-model="input.nameInput" type="text" :value="name" autocomplete="off" class="form-control">
<input v-model="input.posInput" type="text" :value="pos" autocomplete="off" class="form-control">

我可以显示 {{name}} 和 {{pos}} 外部及其工作。但是如果 v-model 和 :value 合并，错误：

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

那么正确的方法是什么？谢谢

【问题讨论】：

标签： vue.js

【解决方案1】：

您不应该在同一个元素上同时使用 v-bind 和 v-model。考虑以下代码：

<label>
  Input with v-bind 
  <input v-bind:value="message" />
</label>
<label>
  Input with v-model
  <input v-model="message" />
</label>
<p>{{ message }}</p>

带有v-bind:value="message" 的输入（或者它的简写，:value="message" 将执行完全相同的操作），实现单向绑定。对“消息”变量所做的任何更改都将在此输入中更新，但在 v-bind 输入中所做的更改不会更改消息变量。

v-model="message" 的输入具有双向绑定。这意味着对输入的更改将反映消息变量，但对消息变量的更改也将反映在输入上。如果你在 vue 中构建一个表单，这种类型的绑定通常是要走的路。

我创建了一个JSFiddle，您可以在其中测试两种类型的绑定。

如果您对 v-bind 和 v-model 的意图是为您的输入字段设置一个默认值，您可以在组件的数据中设置此值。

data: {
  message: 'My default value',
}

或者，如果您的字段由父组件管理（通过 props），您可以使用 default: "My default value" 设置初始值。

props: {
  message: {
    type: String,
    default: 'My default value',
  },
}

【讨论】：

【解决方案2】：

value 与 v-model 相同，v-model 但是在 value 不更新的地方更新输入。

我曾多次使用 value 而不是 v-model，但如果您这样做，您将不得不观察输入并使用函数来更改和更新值。

为此执行以下操作。

<input v-model="input.nameInput" type="text" autocomplete="off" class="form-control">
<input v-model="input.posInput" type="text" autocomplete="off" class="form-control">

删除值并保留 v-model。

【讨论】：