VUE2常见问题以及解决方案汇总（不断更新中）

解决vue项目中 el-table 的 @row-click 事件与行内点击事件冲突，点击事件不生效（表格行点击事件和行内元素点击事件冲突）需要阻止事件冒泡

问题描述

1.点击列的编辑按钮，会触发按钮本身事件，同时会触发行点击事件
2.点击列的元素，会触发本身事件，同时会触发行点击事件

需求描述

点击列的元素，想要传参的同时，点击行内按钮不触发行点击事件，需要阻止事件冒泡

解决方案

需要分情况处理，如果按钮是以el开头的标签，我们可以为点击事件加.native.stop，如下：

<el-button type="text" size="medium" @click.native.stop="editControl(scope.row)">编辑</el-button>

如果按钮是以普通HTML标签，我们可以为点击事件加.stop，如下：

<i @click.stop="editControl(scope.row)">编辑</i>

理解vue @click.native .stop .self

事件修饰符概述

Vue.js 提供了一系列事件修饰符，这些修饰符可以帮助你更精细地控制事件的处理方式。以下是常用的几个修饰符：

• .stop：阻止事件冒泡。
• .prevent：阻止默认行为。
• .capture：使用捕获模式添加事件监听器。
• .self：只有当事件发生在元素本身而不是子元素时才触发。
• .native：直接绑定原生 DOM 事件，而不是 Vue 的合成事件。

vue子组件传递数据给父组件

子组件可以使用 $emit 向父组件传递数据。父组件监听这个事件，并在事件触发时接收数据。

上代码

子组件 (Child.vue)

<template><button @click="sendDataToParent">Send Data to Parent</button>
</template><script>
export default {methods: {sendDataToParent() {const data = { message: '我是子组件发送的数据哦' };this.$emit('data-from-child', data);}}
}
</script>

父组件 (Parent.vue):

<template><div><child @data-from-child="receiveDataFromChild"></child><p>Data received from child: {{ dataFromChild }}</p></div>
</template><script>
import Child from './Child.vue';export default {components: {Child},data() {return {dataFromChild: null};},methods: {receiveDataFromChild(payload) {this.dataFromChild = payload.message;}}
}
</script>

vue + elementui 使用dialog弹出框作为子组件，首次点击弹框可以显示，第二次点击弹框后赋值无法打开弹框

原因：子组件可以使用 $emit 向父组件传递数据，更新父组件里的弹框控制变量值。

上代码

父组件

<template><div><el-button @click="openDialog">Reset</el-button><TestDialog :show-dialog="showDialog" @changeDialog="changeDialog"></TestDialog></div>
</template><script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
export default class Parent extends Vue {showDialog = falseopenDialog() {this.showDialog = true}changeDialog(v) { // 关键代码this.showDialog = v}
}
</script>

子组件 (Child.vue)

<template><div><el-dialogwidth="80%":visible.sync="showDialog"title="上传图片":show-close="true"close-on-click-modal="false"append-to-body@close="handleCancel"><div>TestDialog </div></el-dialog></div>
</template><script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
@Component({props: {showDialog: {type: Boolean,default: false,},},components: {},
})
export default class Parent extends Vue {showDialog = falsehandleCancel() {this.$emit('changeDialog', false) // 关键代码}
}
</script>

多种方案教你解决：vue + elementui 使用dialog弹出框，el-dialog双滚动条、页面抖动问题

解决当el-dialog 弹窗后页面内容很多，导致页面有两个滚动条，el-dialog和body都有滚动条，如何解决弹框后，去掉或者隐藏外面body的滚动条

上代码

方案1：添加 :lock-scroll=“false”

<el-dialogtitle="":visible.sync="showDialog":close-on-press-escape="false":show-close="false":lock-scroll="false" // 关键代码:close-on-click-modal="false"class="create-new-request-dialog"width="70%">

方案2：修改样式

原理在于把弹框设置最大高度，不会超出屏幕，然后把内部的元素设置滚动就可以了

/* 设置弹框最大高 */
:deep(.el-dialog) {max-height: 90vh !important;....此处省略一些设置滚动的代码
}

vue + elementui 使用 el-input 无法输入的问题,打字不生效的问题（使用数组或者对象循环动态绑定）

解决方案

绑定@input事件,输入后实时更新视图

<el-input v-model="myObj.input1" @input="updateView($event)" />
<el-input v-model="myObj.input2" @input="updateView($event)" />//methods
updateView(e) {this.$forceUpdate()
}   

代码案例

                <div v-for="(item, index) in reasonList" :key="item.keyName"><el-inputv-model="item.reason"placeholder="Please state the reason"@input="updateView($event)"></el-input></div>updateView() {this.$forceUpdate();}

vue + elementui 使用 el-checkbox-group ，动态循环生成el-checkbox后数据更新但是页面不更新，无法取消勾选，点击无效问题

解决方案

动态设置值，强制更新视图

<el-checkbox-group v-model="optionsSelected"><divv-for="(item, index) in optionList":key="item.keyName"><el-checkboxv-model="item.checked":label="item.keyName"@change="(val) => {handleChange(val, item, 'checked');}"><p v-html="item.label"></p></el-checkbox></div></el-checkbox-group>handleControlPanelChange(val, item, key) {this.$set(this.optionList[item.index], key, val); # 重点代码this.$forceUpdate(); # 重点代码}

vue2 部分组件赋值后无效，有的时候有效有的时候无效

解决方案1

初始化的时候整个对象设置为null,再重新赋值整个对象就会有更新了

解决方案2

vue el-checkbox 数组赋值后值变了，但是页面不更新状态，状态和值对不上

解决方案1

this.$forceUpdate();

解决方案2

this.optionList.splice(); // 更新视图

解决方案3

检查：如果你用的是el-checkbox-group,除了赋值的时候更改optionList，也要检查赋值一下optionSelected，两个数据不一致会导致异常哦

<el-checkbox-group v-model="optionSelected">
<divv-for="(item,index) in optionList":key="index"><el-checkboxv-model="item.checked":label="item.keyName"@change="(val) => {handleChange(val, item, 'checked');}"><p v-html="item.label"></p></el-checkbox>

亲测管用：element中el-upload上传文件去掉文件列表，上传失败文件如何去掉-去除文件列表失败文件

let uid = fileParams.file.uid // 关键作用代码，去除文件列表失败文件
let idx = this.$refs.uploadFileComponent.uploadFiles.findIndex(item => item.uid === uid) // 关键作用代码，去除文件列表失败文件（uploadFiles为el-upload中的ref值）this.$refs.uploadFileComponent.uploadFiles.splice(idx, 1) // 关键作用代码，去除文件列表失败文件

待继续补充

结语

• 今天就写到这里啦~
• 小伙伴们，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我们明天再见啦~~
• 大家要天天开心哦

欢迎大家指出文章需要改正之处~
学无止境，合作共赢

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~