Vue form input bindings with existing value

Viewed 7504

I want to bind an input with a model. When the page loads, the input has a value. But when I bind with a model, it gets empty as I initialize the model with a null or empty value.

<div id="update-email">
  <input type="text" name="email" value="me@example.com" v-model="email">
  {{ email }}
</div>

JavaScript:

new Vue({
    el: '#update-email',
  data() {
    return {
      email: '',
    };
  }
});

jsfiddle: https://jsfiddle.net/Debiprasad/v8wyj2kw/

How can I update email value with the value of the input when it loads?

4 Answers
Related