2017-03-02 45 views
1

我已经创建了文本输入字段类似下面,如何通过framework7中的picker通过v-model获取数据?

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

当我尝试选择的时候,我能愉快地选择时间像下面,

time selecting page

现在的我m试图通过模型获取价值,我在order.time领域变得空洞。

enter image description here

谁能帮助我如何通过模型得到的时间字段的数据?

感谢&问候,

回答

3

我只是通过这样做V系列:点击=的onChange上拾取场,

<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> 

这是我如何解决这个难题的代码,

我做了24小时的时间格式,我再次添加':0'到日期。

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

现在我有时间数据,

order: { 
    "deliveryTime":'' 
} 

我能够通过访问希望得到实时数据this.order.deliveryTime时,它得到了改变。这只是一种替代方案,这种情况下一定有其他的东西。

谢谢,

相关问题