Javascript 关于Vue双向数据绑定：如果表单字段内容不是来自直接用户输入怎么办？

所以我有一些类似这样的代码：

<input name="date" v-model="date" id="date" type="text" value="" />

---

通常，当用户在输入字段中键入内容时，此代码将实时更新li的内容。但在我的例子中，我已经为它分配了一个javascript日期选择器，而li的内容不会得到更新。我猜是因为没有按键之类的事件。如何优雅地克服这个可爱的问题？

您可以使用组件来解决它，它将优雅地处理此类场景。 例如，使用：

const app=新的Vue{ el:“应用程序”， 组成部分：{ vuejsDatepicker }, 数据：{ 日期： } } .as控制台包装{最大高度：0！重要；底部：0；} 日期：{{Date}

---

好的，我自己的答案来自@numbers1311407的建议。本质上，我从挂载的Vue函数中连接插件事件，然后使用$set instance方法更改所需的属性。总而言之，这里是我的html：

<input name="project[deadline]" v-model="form.project.deadline" data-toggle="datepicker" id="project-deadline" type="text" value="" />

请注意，我稍微推迟了任务，但这不是Vue的事情。这只是因为我正在使用的插件的事件在更改值之前触发，而插件本身并不公开在更改值之后触发的任何事件。因此，我必须等待字段更新，然后才能提取其值并将其分配给Vue的模型

---

作为参考，当前使用的插件是。

此问题的一般解决方案是使用插件提供的回调/事件手动触发元素上的输入事件，这反过来将导致vm获取更改。看见

var vueapp = new Vue({
  el: '#form'
  ,data:{
    date:''
  }
});

<input name="project[deadline]" v-model="form.project.deadline" data-toggle="datepicker" id="project-deadline" type="text" value="" />

var vueapp = new Vue({
  el: '#form'
  ,data:{
    form:{ // for tech reasons I'm using several nested empty objects here
      contact:{}
      project:{} 
      component:{}
      // [...] other several objects ...
    }
  }
  ,mounted: function(){
    $('[data-toggle="datepicker"]').on('hide.datepicker', function (e) {
      _.delay(function(){ // from lodash.js
        this.$set(this.form.project, 'deadline', $(e.target).val());
      }.bind(this), 150); // because the plugin's event fires before the field gets updated
    }.bind(this));
  }
});