Vue.js:在同一个输入元素上设置v-model和v-bind:value

Question

我有一个Vue组件，它包含一个将发送电子邮件的表单。

我在输入字段中显示默认值时遇到问题。当页面加载时，我希望电子邮件输入字段显示用户的默认电子邮件地址，并且只有在用户用新电子邮件重写时才更改该值。

我知道v-bind和v-model不能在同一个<input>上，那么我该如何完成这项任务呢？

<input
v-model="emailAddress"
:value="emailAddress"
type="email"
name="email"
id="email-field"
/>

export default {
props: { defaultEmail: String },
data() {
return {
emailAddress: this.defaultEmail || ''
};
}
}

Answer 1

您只需要v-model就可以绑定输入值：

const emailComponent = Vue.component('emailComponent', { 
template: '#emailComponent',
data () {
return {
emailAddress: this.defaultEmail || ''
}
},
props: { defaultEmail: String },
});
new Vue({
el: "#app",
components: { emailComponent }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<email-component default-email="my email"/>
</div>
<template id="emailComponent">
<input
v-model="emailAddress"
type="email"
name="email"
id="email-field"
/>
</template>

Answer 2

v-model的作用与相同

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

所以您不需要值绑定，只需保留v-model即可将其删除。查看vue-doc了解更多信息：https://v2.vuejs.org/v2/guide/components.html#Using-v型组件