vue.js - 如何使用 :value and v-model on the same element in Vue. js

Question

我想更新一些输入字段

所以我创建了一个输入元素:

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
不幸的是，我收到一个错误:

conflicts with v-model on the same element because the latter already expands to a value binding internally

用数据填充输入字段然后更新它的最佳解决方案是什么？

我还尝试添加 :name="..."而不是 :value="..."

http://jsfiddle.net/to9xwL75/

Answer 1

不要使用 :value与 v-model一起。

使用 mounted()更新您的模型并预填充输入值:

data() {
  return {
    record: {
      email: ''
    }
  }
},
mounted() {
  setTimeout(() => {
    this.record.email = 'example@email.com'
  }, 500)
}