nuxt.js中elementUI踩坑

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>