vue element常见坑

1、vue 如何获取拉回数据后图片的高度？

<img
    :src="userInfo.profilePicture"
    alt
    class="img-picture"
    v-if="userInfo.profilePicture"
    ref="myImg"
    @load="imageFn"
>
 imageFn() {
    console.log(this.$refs.myImg.offsetHeight);
    console.log(this.$refs.myImg.offsetWidth);
 },

2、vue中同一个dom节点，v-if与v-for不推荐同时使用，官方解答：

不推荐同时使用 v-if 和 v-for。
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级

3、vue v-for 中更改item 属性值后，v-show不生效的问题
添加this.$forceUpdate();进行强制渲染，效果实现。

因为数据层次太多，render函数没有自动更新，需手动强制刷新。
4、这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消

beforeRouteLeave(to, from, next) {
    if (to.path === '/votes/subject') {
        next('/task-list');
    } else {
        next();
    }
}

5、element UI 自定义传参的解决方法
这里的handleSelect默认绑定的参数是选中的那条数据。如果一个页面有好几个相同的组件，要想知道选的是哪个？

<el-autocomplete
    v-model="state4"
    :fetch-suggestions="querySearchAsync"
    placeholder="请输入内容"
    @select="handleSelect"
></el-autocomplete>
解决方案：
<el-autocomplete
    v-model="state4"
    :fetch-suggestions="querySearchAsync"
    placeholder="请输入内容"
    @select="((item)=>{handleSelect(item, index)})"
    // 写个闭包就可以了，index表示第几个组件
></el-autocomplete>

6、element-UI 框架 el-input 触发不了 @key.enter事件

<el-input v-model="form.loginName" 
placeholder="账号" 
@keyup.enter="doLogin">
</el-input>
解决方案：使用@key.center.native
<el-input v-model="form.loginName"
placeholder="账号" 
@keyup.enter.native="doLogin">
</el-input>