VueJS无法在Safari中呈现

Question

Safari并未呈现我在VueJS中构建的单页应用程序。

我花了2个星期来开发它。它包含根据用户单击显示或不显示的组件。以及通过“ v-for”元素呈现的数据对象。

在chrome中，所有功能都很完美！在mozilla中也...在野生动物园中，该列表未显示。野生动物园为什么不渲染任何东西？我什至无法调试。

我查找了类似polyfills的工作环境，但是这些东西似乎并没有得到Safari的支持。所以没有必要实施它们。

会喜欢一些支持或见识的人..如果没有解决方法，这意味着我必须回头用JS + Jquery进行构建吗？

提前致谢

Answer 1

所以，我也有同样的问题。意思是，一系列用 v-for 列出的组件，但仅在 Safari（在 Mac 上）中未在屏幕（或 DOM）上呈现，尽管它在 Firefox 和 Chrome（甚至在 Mac 上）上工作得很好。经过长期艰苦的尝试，我终于解决了这个问题。我分两部分给出答案。

快速回答

就我而言，渲染错误是辅助文件中代码深处的日期转换出错的最终结果。事实上，在这个文件中，我收到了字符串格式的 ISO 日期，并通过new Date(myISODateString). 虽然 Firefox 和 Chrome 可以很好地处理此转换，但 Safari 会产生“无效日期”错误，并且连锁反应仅影响单个组件。一旦我更正了这个日期解析，所有内容都在 Safari 中正确呈现。在本例中，我使用 Luxon 进行转换，我将其作为解决方案

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

长答案

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

实际上，弗兰克·普罗沃斯特对这个问题的评论引导我走向了正确的方向。不言而喻，较小的组件大多数时候都是由它们的道具构建的。这就像他们的生命源泉。如果 props 错误，内部操作和渲染也会出现问题。因此，我决定在生命周期挂钩内控制台我的非渲染组件正在接收的道具。当然，控制台上没有打印任何内容。所以我上升了一级，对父组件的 props 做了同样的事情。这次，我在控制台中获取信息，但 Firefox 和 Safari 打印到控制台的内容有所不同。顺便说一句，在我的例子中，道具在创建或安装时没有填写，因为它们依赖于异步网络操作。所以，我的控制台调试看起来像这样；

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

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