2017-12-25 25 views
0

jqueryのdatepickerによって値が変更されたとき、値を自分のvueモデルにバインドする方法を実際に理解しようとしています。私はイムはここで話して何を示すコードペンを持っている:https://codepen.io/squidwurrd/pen/mpOKyaVuejsを使用したDatepicker

<div id="app"> 
<input id="datepicker" v-model="date"> 
</div> 

値は明らかに変わりますが、モデルが更新されません。まあ、かなり新しいvueとは本当に他のライブラリで動作するように取得する方法を理解していない。助けてください。

あなたは

+0

あなたは、ラッパーコンポーネントを必要としています。 https://stackoverflow.com/a/43255516/392102 –

答えて

1

あなたの日付ピッカーを作成するためのmountedライフサイクルフックを使用して、現在のモデルを更新するために、日付ピッカーonSelectイベントをバインドすることができますありがとうございます。

はマウント:我々は、日付ピッカーがVue内にあるので、これを使用する必要があるとのVueの準備ができたとき、私たちはイベントをバインドすることができますので、我々はそれを初期化する必要があります。

以下の作業例があります。

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    date: '',  
 
    }, 
 
    mounted: function() { 
 
     var self = this; 
 
     $('#datepicker').datepicker({ 
 
     onSelect:function(selectedDate, datePicker) {    
 
      self.date = selectedDate; 
 
     } 
 
     }); 
 
    }, 
 
    methods:{ 
 
     
 
    } 
 
})
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script> console.info = function(){} </script> 
 
<script src="https://vuejs.org/js/vue.js"></script> 
 
<script src="https://code.jquery.com/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" type="text/css" /> 
 

 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    <style>.half{width:50%;float:left;}</style> 
 
</head> 
 
<body> 
 
    <div id="app">    
 
     <input id="datepicker" v-model="date"> 
 
     date: {{ date }} 
 
    </div> 
 
    </body> 
 
</html>

+0

ありがとうございました!それは完璧に働いた! – user3756741

関連する問題