Question

Safari并不是在VueJS中构建我的单页面应用程序。

我花了两周时间开发它。它包含根据用户点击显示或不显示的组件。通过＆＃34; v-for＆＃34;呈现的数据对象元件。

在chrome中一切都完美！在mozilla中......在野生动物园中，列表并没有显示出来。为什么没有徒步旅行渲染任何东西？我甚至无法调试它..

我查找了解决方法，比如polyfills ...但是这些似乎不受safari支持。所以没有必要实现它们。

会喜欢一些支持或见解的人..如果没有解决方法，这是否意味着我必须在JS + Jquery中重新构建它？

提前致谢

Answer 1

因此，我遇到了同样的问题。意思是，一系列组件带有v-for列出，但仅在Safari（在Mac上）中才显示在屏幕（或DOM）上，即使它在Firefox和Chrome（即使在Mac上）也可以正常工作。经过长时间的努力，我得以解决该问题。我将分两部分给出答案。

快速答案

在我的情况下，渲染错误是日期转换的最终结果，该错误发生在帮助文件中我的代码深处。确实，在此文件中，我正在接收字符串格式的ISO日期，并通过new Date(myISODateString)将其转换为JS日期对象。尽管Firefox和Chrome可以很好地处理此转换，但Safari产生了“无效日期”错误，并且链式反应仅影响单个组件。一旦我更正了此日期解析，所有内容都将在Safari中正确呈现。在这种情况下，我使用Luxon进行了转换，我将给出解决方案

DateTime.fromISO(myISODateString, { setZone: true }).toJSDate();

长答案

我认为这次体验中更有价值的是我发现这是问题所在，因为在您的情况下，可能是Safari的其他一些特殊性导致了错误。

实际上，弗兰克·普罗沃斯特（Frank Provost）对这个问题的评论引导我朝着正确的方向前进。不用说，较小的组件大多数时候都是由其道具构造的。就像他们的生命之源。如果道具错误，内部操作和渲染也将成问题。因此，我决定在生命周期挂钩中管理非渲染组件正在接收的道具。当然，没有任何内容打印到控制台上。因此，我上了一层，对父组件的道具做了同样的事情。这次，我在控制台中获取信息，但是在Firefox和Safari之间打印到控制台的内容有所不同。顺便说一下，由于我依赖于异步网络操作，因此在创建或安装这些道具时并没有填写它们。因此，我的控制台调试看起来像这样；

created(){
  setInterval(() => {
    console.log(this.myProp);
  }, 5000, this);
}

总之，长话短说，通过这种方式，组件到组件，变量到变量，我发现我依赖于组件之外的帮助文件中helper函数提供的日期，这就是为什么没有错误即使未正确呈现多个组件，也已在运行时记录到控制台。

VueJS无法在Safari

1 个答案: