Vue.js：在同一輸入元素上設置 v-model 和 v-bind:value

Question

我有一個Vue組件，其中包含一個將發送 email 的表單。

我在輸入字段中顯示默認值時遇到問題。 當頁面加載時，我希望 email 輸入字段顯示用戶的默認 email 地址，並且只有在用戶用新的 email 覆蓋它時才更改該值。

我知道你不能在同一個<input>上擁有v-bind和v-model那么我將如何 go 完成這項任務？

<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 文檔以獲取更多信息： https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components