javascript - 具有现有值的 Vue 表单输入绑定(bind)

Question

我想将输入与模型绑定(bind)。当页面加载时，输入有一个值。但是，当我与模型绑定(bind)时，当我使用 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