VueJS中的簡單日期選擇器

我想在組件輸入標記中創建datetimepicker。我已經實現了自舉datetimpicker但是當我選擇日期，我不能得到的部件的方法（這裏輸入的值是一個例子：https://jsfiddle.net/ma9sgnd8/1/VueJS中的簡單日期選擇器

new Vue({ 
    el: '#app', 
    data: { 
    date: '' 
    }, 
    mounted: function() { 

     var args = { 

      format: 'MM/DD/YYYY' 
     }; 
     this.$nextTick(function() { 
      $('.datepicker').datetimepicker(args) 
     }); 

     this.$nextTick(function() { 
      $('.time-picker').datetimepicker({ 
      format: 'LT' 
      }) 
     }); 
    } 
})

來源

2016-11-22 pwnz22

原來VUE監聽input前夕nt節點而不是監視js對象的value（這是合理的，因爲直到我們document.querySelector()左右纔會有任何js對象）。證明：in the doc，它表示我們可以使用.lazy修飾符來聽change事件而不是input。所以當基於jQuery的引導程序插件在js中更改輸入的value時，vue不會檢測到它。 https://jsfiddle.net/ma9sgnd8/4/

來源

2016-11-23 12:26:51

對我來說是一個很好的解決方案。謝謝。 – pwnz22

的問題是在你的日期選擇器，如果您在控制檯看，它崩潰以及概率不正確地更新狀態，嘗試默認的：

<div id="app"> 
    <div> 
    <input type="date" v-model="date"> 
    </div> 
    {{date}} 
</div>

（或外包裝像https://github.com/charliekassel/vuejs-datepicker）

來源

2016-11-22 17:06:21 euvl

默認工作：

幸運的是，這個插件provides a change event，所以我們可以手動在變化事件觸發設置視圖模型的財產。但我需要風格。 – pwnz22

VueJS中的簡單日期選擇器

回答

相關問題