无法从原生 javascript 更改事件更新 vuejs2 v-model

Question

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

由于这个 post 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="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);

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

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

我创建了一个 fiddle 来帮助解释：https://jsfiddle.net/c1askwj2/5/

编辑：一个解决方案是做我不想做的事。基本上 "expose" 你的视图对象：

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

Cant update vuejs2 v-model from native javascript change event

javascript

vuejs2

pickadate