Question

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

正常使用

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

但我真的不想使用jQuery。

此处提供代码：https://jsfiddle.net/4a80dnfo/1/

Answer 1

在您的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 2

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

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

Answer 3

因此，我找到了一种使用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'].value内使用mounted()，但对我来说，这比使用beforeMount()更糟。

如果有人对如何更好地做到这一点提出建议，我非常乐意提供反馈。对于我来说，这种解决方案仍然不是最佳选择。

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

3 个答案: