1

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

由于这篇文章https://github.com/vuejs/vue/issues/96#issuecomment-，我对此事进行了一些搜索（这就是我如何找到建议解决方案是本机javascript事件的部分）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 对象不可用......

4

1 回答 1

3

您需要处理输入上的 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)
    }
  }
});
于 2017-01-15T00:14:40.010 回答