当使用Vue初始化时,日期字段在第一次加载时显示为空,

up9lanfz  于 6个月前  发布在  其他
关注(0)|答案(6)|浏览(75)

版本

2.5.11

复现链接

https://jsfiddle.net/u1wssnwL/3/

复现步骤

创建一个类型为日期的输入框,并用任何有效的日期值进行初始化。
在Safari IOS上查看,你会看到尽管值已经设置,但它会显示为空,因为当你点击该字段时,你会发现IOS日期选择器已经被设置为你提供的那个值。
这只会影响使用Vue初始化的日期输入框,在提供的JSFiddle中,有两个日期输入框以便于复现问题。

预期结果是什么?

两个日期输入框应该有相同的值。

实际发生的情况是什么?

使用Vue初始化的日期输入框显示为空。

ttvkxqim

ttvkxqim1#

看起来,动态地向文档中添加元素使得这种行为出现:

var i = document.createElement('input')
i.setAttribute('type', 'date')
i.setAttribute('value', '2017-07-07')
document.body.appendChild(i)

不确定这是否是我们应该在Vue中解决的问题。
目前,你可以使用这个解决方法:

<input type="date" :value.prop="'2017-07-05'">

这将使用js设置输入框的值。

lawou6xi

lawou6xi2#

是的,感谢这个解决方法,我最终在我的项目中使用Vue来初始化表单字段。我认为这是Vue应该解决的问题,因为它破坏了预期的行为。在我的应用中,整个页面是一个ID为"#app"的div,由于Vue示例化在该处,它影响了不使用Vue的页面。这种约定是Laravel开箱即用的,所以我有种感觉其他开发者也可能受到影响。

ruoxqz4g

ruoxqz4g3#

请记住,这破坏了预期的行为,因为Safari有一个bug。如果Laravel遵循这个约定,我猜想也有可能在那里解决这个问题。我想给你一些关于PR的提示,但我不确定在哪里添加解决方法😞。

efzxgjgh

efzxgjgh4#

我明白了。如果这是一个Safari的bug,我认为它不需要在Vue中解决。也许我可以在文档中为此浏览器特性添加一个注解?但不确定这是否需要包含在文档中。

i86rm4rw

i86rm4rw5#

我也遇到了同样的问题。正如@bzarzuela提到的,我的应用程序也被 Package 在一个"#app" div中。在页面加载时,日期字段为空,但已设置了一个值。当手动设置或选择另一个日期时,日期会显示出来。当禁用Vue.js时,它按预期工作。

kmynzznz

kmynzznz6#

有人解决这个问题了吗?我也有同样的问题。

相关问题