Question

我正在尝试弄清楚如何在输入中触发本机javascript事件，因为我想更新我的vue实例中的数据属性。

由于这篇文章https://github.com/vuejs/vue/issues/96#issuecomment-37870300

，我在这个问题上进行了一些搜索（这就是我如何得到表明解决方案是本机javascript事件的部分）

所以我有这个意见：

<input type="text" name="occurred" id="occurred" class="form-control" required="" v-model="occurred">

通过javascript我试图找出它的原生事件，以便vue可以更新v-model =“发生”（我正在使用 pickadate.js ）

$('#occurred').pickadate({
  format: 'dddd, dd mmm, yyyy',
  formatSubmit: 'dd-mm-yyyy',
  hiddenPrefix: 'prefix__',
  hiddenSuffix: '__suffix'  
});

var evt = document.createEvent('HTMLEvents');
evt.initEvent('change', true, true);

var el = document.getElementById("occurred");
el.dispatchEvent(evt);

我尝试了几种不同的方法，但我似乎无法完全理解它是如何工作的。

如果你能向我解释解决方案，而不是仅仅按照我想要的理解，我会非常高兴。

我创造了一个帮助解释的小提琴：https://jsfiddle.net/c1askwj2/5/

编辑：解决方案是做我不想做的事情。基本上“暴露”您的视图对象：

var vueFoo = new Vue({ ... });

这样你可以通过varFoo.thedate访问它并设置它：

$('#thedate').pickadate({
  onSet: function(value) {
    var date = new Date(value.select);
    vueFoo.thedate = date.getDate() + '-' + date.getMonth() + 1 + '-' + date.getFullYear();
  }
});

这对我来说是一个非常难看的解决方案，因为我喜欢保持我的vue对象不可用......

Answer 1

您需要处理输入上的on change事件以更新视图模型并通过观察视图模型来设置日期选择器的值。如果您将日期选择器抽象到自己的组件中，这会更容易，但是根据您的代码有一个工作示例。

了解有关观看此处的详情：https://vuejs.org/v2/api/#watch

// Init Vue
new Vue({
    el: '#vueDate',
  data: {
    thedate: '00-00-0000',
    thedate_counter: 0,
    picker: null
  },
  mounted: function() {     
    var el = $('#thedate')
    this.picker = el.pickadate().pickadate('picker')
    var vm = this
    el.on('change', function() {
            vm.thedate = this.value
        })
  },
  watch: {
    thedate: function(value) {
        this.picker.set('select', value)
    }
  }
});

无法从本机javascript更改事件更新vuejs2 v-model

1 个答案: