Vue使用现有值形成输入绑定

Question

我想用模型绑定输入.页面加载时,输入有一个值.但是当我与模型绑定时,它会变空,因为我使用null或空值初始化模型.

<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/

如何email在加载时使用输入值更新值？

Answer 1

我通过将模型值初始化为输入字段的值来处理此问题。这样，当 vue 最初将输入字段设置为模型值时，它就是输入字段中的值。

下面的例子使用jquery：

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

Java脚本：

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

如果你想不使用jquery，只需更改$('#email').val()为document.getElementById('email').value