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

Question

鉴于我想更新我的 vue 实例中的数据属性，我试图弄清楚如何在输入上触发原生 javascript 事件。

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

所以我有这个输入：

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

通过 javascript，我试图确定它是本机事件，以便 vue 可以更新 v-model="occurred"（我正在使用 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)
    }
  }
});