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

当我尝试选择时间时，我可以像下面一样愉快地选择时间，

现在我试图通过模型获取价值，我在order.time字段上变空了。

任何人都可以帮助我了解如何通过模型获取时间字段数据吗？

谢谢＆amp;的问候，

Answer 1

我刚刚使用v-on执行此操作：click = onChange on picker field，

<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获取数据？

1 个答案: