Question

我有一个使用多种表单的laravel webapp。我最近介绍了Vue.js v2来处理一些运行良好的特定自定义输入类型。

问题是，在vue实例元素中的普通html5输入[type = time]输入在iOS safari / chrome中无法正确呈现 - 它们显示为本机时间戳，但似乎具有空值。当您单击以进行更改时，它们会显示正确的值。

我可以通过使用一个自定义的vue组件来解决这个问题，该组件只将value属性传递给vue实例，但我认为我必须做错了，因为我无法在任何地方找到它。

I have managed to reproduce this on JSFiddle 问题仅出现在移动浏览器中

HTML

<div id="app" style="background-color:lightblue; padding:30px">
  <h3>This div is the Vue element</h3>
  <form action="">
    <p>  
      <label for="">Standard Input</label>
      <input type="time" value="23:24:00" />
    </p>
    <p>
      <label for="">Vue Component</label>
      <vue-time value="13:45:00"></vue-time>
    </p>

  </form>
</div>

<div style="background-color:lightyellow; padding:30px">
  <h3>This div is outside the Vue instance</h3>
  <form action="">
    <label for="">Standard Input</label>
    <input type="time" value="23:24:00" />
  </form>
</div>

JS

Vue.component('vue-time', {
    template: '<input type="time" :value="value">',
    data() {
        return {
                value: ''
        }
    }
});

const vue = new Vue({
    el: '#app',
    data() {
        return {
            value: ''
        }
    }
});

移动浏览器时间输入在vue元素内不起作用

0 个答案: