从 HTML 输入加载默认值到 vue.js 数据

Question

我想知道是否可以将标签的value值加载为 vue.js 数据的默认值？

工作正常

coupon: $('#coupon').val(),

但我真的不想使用 jQuery。

代码可在此处获得：https : //jsfiddle.net/4a80dnfo/1/

Answer 1

所以我找到了一种使用beforeMount()钩子完成这项工作的方法。

假设这个 HTML：

<div id="coupon-code">
    <input ref="coupon" v-model="coupon" value="99PI_ORG" />
</div>

这个 Javascript 应该可以完成工作：

  new Vue({
    el: '#coupon-code',
    data: {
      coupon: ''
    },
    beforeMount: function() {
      this.coupon = this.$el.querySelector('[ref="coupon"]').value;
    }
    // methods and such here.
  }
});

beforeMount()在尝试了一些错误后，我最终使用了钩子。我学到的一些可能相关的东西：

• this.$refs不存在于created()钩子中。
• this.$refs.coupon.value在mounted()钩子中返回一个空字符串。
• ref元素的属性在mounted()钩子之前被删除，所以类似的东西this.$el.querySelector('input[ref=coupon]')不起作用。
• 您可以使用this.$el.querySelector('input[data-ref=coupon]').attributes['value'].valueinside mounted()，但这对我来说似乎比使用beforeMount().

如果有人对如何更好地做到这一点有建议，我非常愿意接受反馈。这个解决方案对我来说仍然不是最佳的。

Answer 2

在您的 jsfiddle 中，您使用的是v-model，因此data()您只需设置所需的值

编辑：更新代码以使用v-bind

new Vue({
	el: '#app',
	data: {
            coupon: 'You value here',
	}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>

<div id="app">
  <input id="coupon" type="text" name="coupon" :value="coupon" />
</div>

Answer 3

<input  name="coupon"  v-model="coupon" value="def val">    

window.app = new Vue({
    el: '#xxx',
    data: {
       coupon: document.querySelector("input[name=coupon]").value
    }
    ...
});