使用getter定器的Vue v型模型和JQuery爲的DatePicker輸入

我與VUE一起安裝jquery插件（日期選擇器）和埋設在與獲取和設置爲V模型的數據流的部件。使用getter定器的Vue v型模型和JQuery爲的DatePicker輸入

我在檢索jQuery的日期選擇器輸入到V-模型組件成功，但不是無法顯示回如下：

<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});   
         } 
        }); 
        }     
       } 
       },

我是否應該將它應用於mounted和beforeDestroy，就像this JSBbin example？

這是一個this case跟進，供大家參考。

來源

2017-06-23 Ardhi

奇怪的是，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

來源

2017-06-24 17:41:07 Ardhi

我覺得你不這樣做，因爲它的目的是在VUE方式...

是什麼proxyValue？爲什麼它包含道具？道具應該不在計算部分。

對於使用VUE你創建一個jQuery日期選擇器必須做到以下幾點：

創建組件的DatePicker
創建內部部件的模板，使用jQuery的日期選擇器的html
上安裝（）函數聽的jquery改變事件的日期選擇
發射的輸入事件到母體與這樣的：

this。$ emit（'input'，value）;
當您使用該組件創建一個V模型，它將在數據更改時自動更新...（由於輸入觸發事件）
做什麼您想要的模型然後。

希望這些信息將幫助你。

來源

2017-06-23 21:58:27

謝謝您的回覆，原因是'proxyValue'和'props'是因爲我使用了Vuex和組件。無論如何，我已經把它整理出來，以防有興趣的人提出答案。 – Ardhi

編輯：是的，你說得對，我錯放的道具，並且已經重新固定它的片斷，謝謝。 – Ardhi

使用getter定器的Vue v型模型和JQuery爲的DatePicker輸入

回答

相關問題