How to use :value and v-model on the same element in Vue.js

Question

I would like to update some input fields

so I created an input element:

new Vue({
  el: '#app',
  data: {
    record: {
      email: '[email protected]'
    },
    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>

In this input element I added :value attr and a v-model

Unfortunately I get an error:

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

What is the best solution to fill the input field with data and then update it?

I also tried to add :name="..." instead of :value="..."

http://jsfiddle.net/to9xwL75/

Answer 1

Don't use :value with v-model together.

Use mounted() to update your model and pre-fill input value:

data() {
  return {
    record: {
      email: ''
    }
  }
},
mounted() {
  setTimeout(() => {
    this.record.email = '[email protected]'
  }, 500)
}