使用 Getter Setter 与 Vue v-model 和 JQuery 作为 DatePicker 输入

Question

我安装了 jquery 插件 (datepicker) 和 vue 并嵌入到一个组件中 getter 和 setter 用于 v-model 数据流。

我已成功检索到 v-model 组件的 jquery 日期选择器输入，但并非无法显示如下：

<DatePickerHelper :value="componentGetObject['## startDate ##']"
:signal="triggerSignal" pro="## startDate ##" ></DatePickerHelper>

     triggerSignal(obj,$event) {
       this.componentSignal({pro:obj.pro,ev:event.target.value});
     },

<template>
<div>
    <input v-model.lazy="proxyValue" />        
</div>
</template>

props: ['value', 'signal', 'pro' ],
computed: {
    proxyValue: {                      
                  get() { return this.value; },
                  set(newValue) { 
                    var self = this;
                    jquery(this.$el).datepicker({
                        onSelect: function(newValue) {
                            self.signal({pro: self.pro, val: newValue});        
                      }
                    });
                  }                 
                }
              },

我应该像 this JSBbin example 一样在 mounted 和 beforeDestroy 上应用它吗？

这是的跟进，供大家参考。

Answer 1

我觉得你没有按照 vue 的方式去做...

什么是 proxyValue？为什么它包含 props？道具应该在组件中而不是在计算中。

要使用 vue 创建 jquery 日期选择器，您必须执行以下操作：

创建组件 Datepicker
在使用 jquery 日期选择器的组件内创建一个模板 html
在 mounted() 函数上监听 jquery 日期选择器的更改事件
in change 像这样向父级发出输入事件：

this.$emit('input', value);
当您使用该组件时创建一个 v-model，它会在数据更改时自动更新...（由于输入触发事件）
然后用模型做任何你想做的事。

希望这些信息对您有所帮助。

Answer 2

奇怪的是，jquery不想接收jquery(this.$el)，所以解决方案是这样的：

    computed: {
        proxyValue: {
                      get() { return this.value; }          
                    }
                  },
    mounted:function(){
        var self = this;
        jquery('#dateInput')
        .datepicker({
            dateFormat: 'yy-mm-dd',
            onSelect: function(newValue) {
                self.signal({pro: self.pro, val: newValue});        
          }
        });
    }

与set功能完全在mounted

里面

使用 Getter Setter 与 Vue v-model 和 JQuery 作为 DatePicker 输入

Using Getter Setter with Vue v-model and JQuery for DatePicker input

javascript

jquery

vue.js

vue-component

vuejs2