framework7中如何通过v-model获取picker的数据？

Question

我创建了如下所示的文本输入字段，

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

当我尝试 select 的时候，我能够 select 快乐地像下面这样，

现在我正尝试通过模型获取值，但 order.time 字段上空了。

谁能帮我看看如何通过模型获取时间字段数据？

感谢和问候，

Answer 1

我只是通过在选择器字段上使用 v-on:click=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 这样的访问来获取时间数据，每当它发生变化时。这只是一个替代方案，这个场景肯定有其他东西。

谢谢，

framework7中如何通过v-model获取picker的数据？

How to get data from picker through v-model in framework7?

vue.js

html-framework-7

vuejs2