Question

这是我的错误代码：

<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冲突，因为后者已经在内部扩展为绑定的值

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

Answer 1

值与v-model相同，但是v-model会在值不相同的输入上更新。

曾经有几次我在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模型。

Answer 2

您不应在同一元素上同时使用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"将执行相同的操作）实现单向绑定。对“ message”变量所做的任何更改都将在此输入中更新，但是在v-bind输入中所做的更改将不会更改message变量。

带有v-model="message"的输入具有双向绑定。这意味着对输入的更改将反映出消息变量，但是对消息变量的更改也将反映在输入中。如果要在vue中构建表单，通常采用这种方式。

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

如果同时使用v绑定和v模型的目的是为输入字段设置默认值，则可以在组件的数据中设置此值。

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

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

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

在<input />

2 个答案: