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>

Javasacript：

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

如果您想在没有jquery的情况下执行此操作，只需将$('#email').val()更改为document.getElementById('email').value

Answer 2

您可以使用指令将值放入元素并发出输入事件。

＆＃13;

new Vue({
  el: '#update-email',
  data: {
    email: null
  },
  directives: {
    init: {
      bind(el) {
        el.value = el.getAttribute('value');
        el.dispatchEvent(new Event('input'));
      }
    }
  }
});

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="update-email">
  <input v-init type="text" name="email" value="me@example.com" v-model="email"> {{ email }}
</div>

＆＃13;

Answer 3

要添加Ron C的答案的非JQuery变体，并明确链接yuriy链接建议的答案，这里是the solution suggested by the creator of Vue.js：

https://jsfiddle.net/vzns7us7/

<强>模板：

<script>
// rendered by server
window.__FORM__ = {
  fill: 'my_default_value'
}
</script>

<div id="test">
  <input type="text" v-model="fill">
  {{ fill }}
</div>

<强> JavaScript的：

new Vue({
    el: '#test',
    data () {
        return window.__FORM__ || {
          fill: 'none'
        }
    }
});

Answer 4

罗恩的回复和yuriy636的评论完全回答了你的问题。只是为了补充使用Vuex（https://vuex.vuejs.org/en/）的更高级解决方案：

＆＃13;

const store = new Vuex.Store({
  state: {
    email: 'me@example.com'
  }
})
new Vue({
  el: '#update-email',
  store,
  created() {
    this.email = this.$store.state.email
  },
  data() {
    return {
      email: '',
    };
  }
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.4.0/vuex.min.js"></script>

<div id="update-email">
  <input type="text" name="email" v-model="email"> {{ email }}
</div>

＆＃13;

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

4 个答案: