
帐号登录 邮箱快速注册
1、报错信息:
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
报错截图:
服务端与客户端渲染的DOM结构不一样。上图中出现的这个问题是element-ui没有允许在服务端使用导致的。
对 nuxt.config.js 中对 element-ui 设置进行修改
plugins: [{src:'~plugins/element-ui', ssr: false}]
改成
plugins: [{src:'~plugins/element-ui', ssr: true}]
2、element ui组件内点击事件不生效
将 @click 换成 @click.native即可。
<el-dropdown trigger="click">
<p class="el-dropdown-link">
<img src="~/static/img/avatar.jpg" alt=""><i class="el-icon-caret-bottom"></i>
</p>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item><nuxt-link to="/"><i class="fa fa-cog fa-lg"></i> 设置</nuxt-link></el-dropdown-item>
<el-dropdown-item @click.native="userOut"><i class="fa fa-sign-out fa-lg"></i> 退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>