Comments (5)
问题描述
现在此问题仅存在于线上服务端,测试网和主网均存在此问题。但是在本地运行 yarn dev
所启动的开发服务器却会正常如预期显示窗口。预览如下:
可以正常响应鼠标的 hover 事件。但是在测试网(也包括主网,下同),鼠标放在图标上则不会有任何反应。
问题原因
经过比对,发现测试网会在 JavaScript Console 显示一条错误信息,而开发服务器则没有此信息。
Mismatching childNodes vs. VNodes: NodeList(3) Array(3)
经过对此错误信息的研究,我发现了相关的原因描述。简单来说,在开发服务器上,此问题会被自动解决。但是我们部署了之后,就会由于有些节点没有渲染(一般是因为用到了条件判断 v-if
)而导致 NuxtJS 两端数据的不匹配,从而导致无法正确渲染。
有关更多信息,请点击上方的链接。
尝试的解决方案
- 使用
v-show
替代v-if
- 失败 commit 链接
上述 Issue 链接里大部分人的建议,这样可以使节点无论如何都渲染出来。但是我尝试修改代码后,并没有解决此问题。Console 也依旧会显示该错误信息。 - 使用
<client-ony>
标签包围组件调用 - 失败 commit 链接
Stack Overflow 上相关问题的部分回答的建议。如这个。但是毫无作用。 - 尝试 Stack Overflow 上另一个回答的建议
- 尝试上述 相关的原因描述 链接中提到的,为每个
<a>
标签加上aria-hidden
from matataki-frontend.
当前进度
现在我们的 testing 分支依旧保留了上述两个解决方案的代码,另外两个解决方案还有待尝试。我现在遇到的问题有:
- 无法在本地重现问题。我虽然将环境由开发设置为生产模式,但依旧没有显示出这个问题来。
- 因为上述问题,所以无法有效确认网上的解决方案是否有用。
所以,对于此问题我不知道该如何 debug 了,只能继续照搬解决方案再 push 代码上去看效果?
申请小田的协助 @xiaotiandada
from matataki-frontend.
测试网已解决 待测试
from matataki-frontend.
from matataki-frontend.
测试网已解决 待测试
测试正常,无问题。便关闭这个 Issue 了。
(ps. 小田好厉害呜呜呜
from matataki-frontend.
Related Issues (20)
- 时间线页面未登录状态banner需要进行移动端适配
- tag页面小问题 HOT 1
- 评论区不支持 markdown 语法。 HOT 3
- 文章Head里面增加Meta Link
- 文章发布、编辑文章、创建草稿、更新草稿 Tags为空内容处理 HOT 3
- 文章详情的 Banner 样式丢失 HOT 1
- 分支问题 HOT 1
- 文章「展示」和编辑器不一致 HOT 5
- 在英文状态下的「写文章」按钮的边框依然会和按钮本体不匹配 HOT 1
- 【Fan票交换事务所】预期滑点和实际不符
- 【DAO工具】网站已经无法使用 HOT 1
- 【Matataki】进入有权限的文章后会连续弹出3次提示 HOT 1
- 【任务大厅】移动端登录后无法获取登录状态
- 【独立子站】 选简体中文在部分主题下不匹配
- 优化 onboarding 流程。 HOT 3
- 有链接打开,会处在非登入状态 HOT 4
- 「Matataki」网站语言设置在登录状态下记录至 Profile
- Fan票 Uniswap 交易所:发行量展示异常
- Bug Report of meta.io
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from matataki-frontend.