2017-03-02 7 views
1

私は今、私が「、私は時間を選択しようとすると、私は以下のように楽しく時間を選択することができるよ、以下のようにframework7のv-modelを通じてピッカーからデータを取得する方法は?

time selecting page

<f7-list-item> 
      <f7-icon slot="media" f7="time"></f7-icon> 
      <f7-input type="text" placeholder="Delivery time" v-model="order.time" readonly id="picker-describe"></f7-input> 
</f7-list-item> 

Now in mounted method, I have the below code, 
mounted: function mounted() { 
      //do something after mounting vue instance 
     var myApp = new Framework7(); 
     var pickerDescribe = myApp.picker({ 
      input: '#picker-describe', 
      rotateEffect: true, 
      cols: [ 
      // Hours 
      { 
       values: (function() { 
        var arr = []; 
        for (var i = 0; i <= 23; i++) { arr.push(i); } 
        return arr; 
       })(), 
      }, 
      // Divider 
      { 
       divider: true, 
       content: ':' 
      }, 
      // Minutes 
      { 
       values: (function() { 
        var arr = []; 
        for (var i = 0; i <= 59; i++) { arr.push(i < 10 ? ': 0' + i : ": " + i); } 
        return arr; 
       })(), 
      }, 
      // Meridian 
      { 
       values: (function() 
       { 
        var arr = ['am','pm']; 
        return arr; 
       })(), 
      } 
      ] 
     }); 
    }, 

をテキスト入力フィールドを作成しましたモデルを通して値を取得しようとすると、order.timeフィールドで空になります。

enter image description here

誰もがモデルを通じて時間フィールドのデータを取得する方法で私を助けることができますか?

おかげ&よろしく、

答えて

3

私はちょうど使用してこれをやったV-上:、ここで

<f7-list-item> 
      <f7-icon slot="media" f7="time"></f7-icon> 
      <f7-input type="text" class="delivery-time" v-on:change='changeTime()' placeholder="Delivery time" v-model="order.deliveryTime" readonly id="picker-describe"></f7-input> 
</f7-list-item> 

が、私はこのパズルを解く方法コードで、ピッカーフィールド上=のonChangeをクリックし

私はこれを24時間の時間形式にして、 ':0'を日付にもう一度付け加えました。

changeTime() { 
       var $$ = Dom7; 
       var date = $$('#picker-describe').val(); 
       this.order.deliveryTime = date + ':0'; 
      }, 

は今、私はそれが変わってしまった時はいつでもthis.order.deliveryTimeのようにアクセスして時刻データを取得することができるよ

order: { 
    "deliveryTime":'' 
} 

、で時刻データを持っています。これは単なる代替案であり、このシナリオには何か他のものが必要です。

ありがとう、

関連する問題