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

tangdou369098655

已于 2024-10-06 04:15:09 修改

阅读量237

点赞数 1

分类专栏： vue 文章标签： vue.js elementui 前端

于 2024-10-06 04:03:15 首次发布

本文链接：https://blog.csdn.net/tangdou369098655/article/details/142721690

版权

vue 专栏收录该内容

18 篇文章 3 订阅

订阅专栏

解决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 = false
  openDialog() {
    this.showDialog = true
  }
  changeDialog(v) { // 关键代码
    this.showDialog = v
  }
}
</script>

子组件 (Child.vue)

<template>
  <div>
  <el-dialog
      width="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 = false
  handleCancel() {
    this.$emit('changeDialog', false) // 关键代码
  }
}
</script>

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

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

上代码

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

<el-dialog
      title=""
      :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-input
                    v-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">
            <div
              v-for="(item, index) in optionList"
              :key="item.keyName"
            >
              <el-checkbox
                v-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">
<div
              v-for="(item,index) in optionList"
              :key="index"
            >
              <el-checkbox
                v-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) // 关键作用代码，去除文件列表失败文件