在Vue下使用WdatePicker插件遇到的问题

在使用WdatePicker时碰到了选择的日期没有同步到Vue的属性中去的问题。一开始是通过Jq获取相应元素的方式获得其值再赋值给对应的属性，之后阅读了api稍微做了一下优化，代码如下。

HTML

<div id="example">
        <input type="text" v-model="date" id="data_WdatePicker" v-on:click="datePicker('data_WdatePicker')" />
</div>

给input元素绑定属性date，同时在click事件上将自身的id传递给方法。

JS

var vm = new Vue({
            el: "#example",
            date:{
                data:null
            },
            methods: {
                datePicker: function (elementId) {
                    let vueObj = this;
                    WdatePicker({
                        el: elementId,
                        dateFmt: 'yyyy-MM-dd',//日期格式，可以只显示年或年月，也可以额外显示时间
                        onpicked: function () {
                            var value = $("#" + elementId).val();
                            vueObj.date = value;
                        },
                        oncleared: function () {
                            vueObj.date = null;
                        },
                        isShowClear: true,
                        readOnly: true
                    });
                }
            }
        });

点击日期插件触发click事件调用方法datePick，将元素ID作为配置项。接下来是重点，wdatepicker点击日期后会触发它的onpicked事件，我们给这个事件添加一个方法，获取ID为我们传入ID的元素的value，将其赋值给vue中的属性（在插件内使用this并不能指向vue，因此需要在插件外将this赋值给vueObj作为过渡）。同理点击日期插件的清空按钮会触发oncleared事件（其实还有onclearing事件，有特殊需要也可以自行添加），做相同的操作就可以了。