nuxt.js中elementUI踩坑

责编:menVScode 2018-09-26 23:35 阅读(277)

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>&nbsp;&nbsp;设置</nuxt-link></el-dropdown-item>
        <el-dropdown-item @click.native="userOut"><i class="fa fa-sign-out fa-lg"></i>&nbsp;&nbsp;退出</el-dropdown-item>
    </el-dropdown-menu>
</el-dropdown>


标签: nuxt elementUI
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码