我想更新一些输入字段
所以我创建了一个输入元素:
new Vue({
el: '#app',
data: {
record: {
email: 'example@email.com'
},
editing: {
form: {}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" :value="record.email" v-model="editing.form.email">
<pre>{{ editing.form.email }}</pre>
</div>
在此输入元素中,我添加了:value
attr和一个v-model
不幸的是,我得到一个错误:
与同一元素上的v-model冲突,因为后者已经存在 扩展为内部绑定的值
用数据填充输入字段然后对其进行更新的最佳解决方案是什么?
我还尝试添加:name =“ ...”而不是:value =“ ...”
答案 0 :(得分:1)
请勿将:value
与v-model
一起使用。
使用mounted()
更新模型并预填充输入值:
data() {
return {
record: {
email: ''
}
}
},
mounted() {
setTimeout(() => {
this.record.email = 'example@email.com'
}, 500)
}
答案 1 :(得分:1)
您可能希望将初始值/默认值放在data
对象上,双向绑定应该与v-model
一起使用。只需删除editing.form.email
,然后尝试以下操作即可:
<div id="app">
<input type="text" v-model="record.email">
<pre>{{ record.email }}</pre>
</div>
new Vue({
el: '#app',
data() {
return {
record: {
email: 'example@email.com'
}
}
}
})
如果需要使用动态值填充此字段,则可以添加处理程序方法并在获取数据时更新输入元素:
methods: {
getData() {
axios.get('/some-url')
.then(data => {
this.record.email = data.email;
});
}
}
答案 2 :(得分:0)
就像亚历山大所说,不要同时使用:value和v-model。这是因为v模型创建了two-way binding。它结合了:value和@change。绑定输入后,您应该忘记输入,而将注意力集中在模型上。
如果“ example@email.com”是占位符,为什么不使用placeholder
attribute?