【Vue】日常错误总结(持续更新)

2023-12-13 03:33:59
日常遇到的小问题汇总, 内容小篇幅少的就全放这里了, 

内容多的会在Vue专栏单独分享~

目录

【Q】 el-form-item值为 null 或 undefined显示““

【Q】dialog内组件数据刷新总是延迟慢一拍

问题背景描述

解决方案

代码简单模拟

JS

【Q】el-input 不能输入的解决办法

方法1:标签嵌套太深

方法2:使用了 template 作为 el-input 的父标签

方法3:v-model

【Q】npm ERR A complete log of this run can be found in: npm ERR

【Q】el-tabs表格右下角按钮被遮挡

【Q】this.$refs.xxx 报错undefined解决办法

【Q】this.$refs[‘form’].resetFields()

【Q】this.defParams = {...this.params}

【Q】Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value

【Q】数据还没获取就已渲染页面

【Q】页面跳转后没有重新请求接口

a、updated刷新组件内的方法更新数据

b、监听路由去请求方法更新数据

【Q】调用子组件提示this.$refs["xxxRef"].xx()? underfined

a、首次渲染不调用

b、加载完数据再请求

【Q】Error in callback for watcher "$route": "TypeError: this.$refs.xxxRef is undefined"


【Q】 el-form-item值为 null 或 undefined显示““

可以在 `el-form-item` 中使用表达式,使用 `v-if` 指令判断当前表单项的值是否为 null 或 undefined,如果为 null 或 undefined,就显示空字符串。

例如:

<template>
  <el-form ref="form" :model="formData" :rules="formRules" label-position="left">
    <el-form-item label="姓名" :label-width="labelWidth">
      <el-input v-model="formData.name" clearable v-if="formData.name !== null && formData.name !== undefined"></el-input>
      <span v-else>&nbsp;</span>
    </el-form-item>
    <el-form-item label="性别" :label-width="labelWidth">
      <el-select v-model="formData.gender" clearable v-if="formData.gender !== null && formData.gender !== undefined">
        <el-option label="男" value="male"></el-option>
        <el-option label="女" value="female"></el-option>
      </el-select>
      <span v-else>&nbsp;</span>
    </el-form-item>
    <el-form-item label="年龄" :label-width="labelWidth">
      <el-input type="number" v-model.number="formData.age" clearable v-if="formData.age !== null && formData.age !== undefined"></el-input>
      <span v-else>&nbsp;</span>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: null,
        gender: null,
        age: null
      },
      formRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value < 0) {
                callback(new Error('年龄不能小于0岁'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ]
      },
      labelWidth: '120px'
    };
  }
};
</script>

在上面的代码中,我们在每个表单项中使用 `v-if` 判断当前表单项的值是否为 null 或 undefined,如果为 null 或 undefined,则将当前表单项的值设置为空字符串。这样就可以将值为 null 或 undefined 的表单项显示为空。我们使用 `&nbsp;` 来占位,使表单外观更美观。

注意:如果在 `el-form-item` 的 `label` 属性和 `v-if` 判断条件中都使用了表达式,那么应该将所有表达式放在一对花括号中。例如:

<el-form-item :label="'年龄:' + labelSuffix" :label-width="labelWidth" v-if="formData.age !== null && formData.age !== undefined">
  <el-input type="number" v-model.number="formData.age" clearable></el-input>
</el-form-item>
<span v-else>&nbsp;</span>

在上面的代码中,我们在 `el-form-item` 的 `label` 属性和 `v-if` 判断条件中都使用了表达式,因此应该将它们放在一对花括号中。

【Q】dialog内组件数据刷新总是延迟慢一拍

问题背景描述

用dialog做了一个一个新增功能,有个多层复选框,关联一个文本域。
选中复选框时,文本域刷新,但是总是慢一拍。
:destroy-on-close="true", v-if, $nextTick,用个遍了,都不好使。
同样的功能在编辑页面就是正常的,区别仅仅是因为新增是dialog子页面,
由此入手排查问题,发现竟然是...

解决方案

代码简单模拟

源码不便展出,凑合看解决问题就好~

<el-dialog :destroy-on-close="true"  title="国服李白" :visible.sync="dialogEdit">
      <span>这是一段信息</span>
      <flow-chart :dialogNodes="dialogNodes" :key="timer0"></flow-chart>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
</el-dialog>

组件上添加 :key="timer1" data 中定义 timer0''
在获取数据成功后 将 timer0 赋值为 this.timer1 = new Date().getTime()

JS
const res = await ApiUserManage.execDiagram(param)
          if (res.success){
            this.timer0 = new Date().getTime()
            this.dialogNodes = res.result.nodes

【Q】el-input 不能输入的解决办法

输入框动态填充值,但是填充后不能编辑了,
就像是被禁止了一样, 就很无语...

查了下资料, v-model填写了, 也没有templete标签嵌套

最终方法一即可解决问题...

方法1:标签嵌套太深

如果标签嵌套太深,会导致无法获取到 DOM,这是我们需要 $forceUpdate() 强制刷新,才可获取

<el-input type='text' v-model='value' @change='change()'></el-input>
data(){
	return {
		value:'',
	}
}
change(){
	this.$forceUpdate();  //强制刷新
}

方法2:使用了 template 作为 el-input 的父标签

这种情况需要在 template 中添加 slot-scope 属性,

<template slot-scope="scope">

方法3:v-model

el-input 中没有 v-model

【Q】npm ERR A complete log of this run can be found in: npm ERR

总是提示这个错误,以为是nodejs版本v16太高的问题,换成v12后,还是不行...

npm i后总是提示这个

nnpm ERR! Unexpected token '.'  

npm ERR! A complete log of this run can be found in: 

npm ERR!     C:\Users\admin\AppData\Local\npm-cache\_logs\2022-08-29T15_07_28_136Z-debug-0.log

后来发现管理员打开VSCode就好了...

【Q】el-tabs表格右下角按钮被遮挡

该列设置了?fixed="right",? 去掉?fixed="right"即可

常规方法:? 看下是否是下方组件margin设置过大

【Q】this.$refs.xxx 报错undefined解决办法

【Vue】this.$refs.xxx 报错undefined解决办法

【Q】this.$refs[‘form’].resetFields()

要想this.$refs[‘form’].resetFields()方法有效,必须配置el-form :model?属性和el-form-item中的prop属性才可以

this.$refs[‘form’].resetFields()这个做法其实是重置表单到初始值,不是清空表单,当表单第一次在页面中渲染时所用的数据就是初始数据,

【Q】this.defParams = {...this.params}

this.params=this.defParam;初始化默认参数, vue2会把内存地址也复制过去,当params里面的值修改后, this.defParams也会相应改动,所以要先复制一份再赋值给this.params

this.defParams = {...this.params}, 

这样它们之间的值才不会相互影响, 不过这在Vue3里面都已经解决了

【Q】Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value

改动了子组件中引用的父组件的变量,也就是props中的数据

中组件props中的数据只能单向流动,即只能从父组件通过组件的DOM属性attribute传递props给子组件,子组件只能被动接收父组件传递过来的数据,并且在子组件中,不能修改由父组件传来的props数据。

props:{
    cid:{
      type:String,
    },
  },



  methods: {

    //父组件刷新子组件数据1
    flush(cid){
      const params = {cid:cid};
      this.getData(params);
    },

    //父组件刷新子组件数据2, 这种情况就会出现上述问题
    flush(cid){
      this.cid= cid;
      const params = {cid:this.cid};
      this.getData(params);
    },

【Q】数据还没获取就已渲染页面

简单举例

...
v-if="loading"
...


data(){
    return{
       loading:false,
    }
}

created(){ 
	this.init();
}, 

methods: {

    init() {
        this.getList();
    },
    
    getList() {
     
      queryListData(this.params)
        .then((res) => {
         if(res.code==='200'){
           ...
           this.loading = true;
         }
        })
        .finally(() => {
          ...
        });
    },
}

【Q】页面跳转后没有重新请求接口

aupdated刷新组件内的方法更新数据

简单举例

...
ref="demoRef"
...

created() {}, 
mounted() {},
updated() {
    this.init();
},

 methods: {
    init() {
        this.$refs["demoRef"].flush();
      }
    },
}

b监听路由去请求方法更新数据

简单举例

...
ref="demoRef"
...

created() {}, 
mounted() {},
updated() {},

watch: {
	$route(a, b) {
	  if (a.path != b.path) {
		this.init();
	  }
	},
    //-----或-----
	$route(-) {
		this.init();
	},
},

methods: {
    init() {
        this.detail();
        ...
      }
    },
}

【Q】调用子组件提示this.$refs["xxxRef"].xx()? underfined

a首次渲染不调用

b加载完数据再请求

简单举例

...
ref="demoRef"
...

data() {
   return {
        loadingData:false,
    },
}
created() {
 this.init();
}, 
mounted() {},
updated() {
    if(loadingData){
         this.$refs["demoRef"].flush();
    }
},

 methods: {
    init() {
      queryListData(this.params)
        .then((res) => {
          ...
          this.loadingData= true;
        });
      }
    },
}

【Q】Error in callback for watcher "$route": "TypeError: this.$refs.xxxRef is undefined"

父页面监控路由变动时刷新子组件提示, 这里是同一个页面路由参数改变,

Error in callback for watcher "$route": "TypeError: this.$refs.tableOneRef is undefined"

困扰许久, this.nextTick(){}等等都不好使, 原因是在Vue中,当路由发生变化时,组件的实例会被销毁然后重新创建。因此,在路由切换后,组件的this上下文会发生改变。

当你监听路由变化时,如果在回调函数中使用了this关键字,它将指向新创建的组件实例,而不是之前的组件实例。这意味着你无法直接访问之前组件实例中的数据和方法。

为了解决这个问题,你可以在监听路由变化时,将需要保留的数据和方法保存到其他变量中,或者使用Vue提供的beforeRouteUpdate导航守卫来处理组件的更新逻辑。

beforeRouteUpdate(to, from, next) {
  // 保存需要保留的数据和方法
  const preservedData = this.data;
  const preservedMethod = this.method;

  // 执行路由变化前的逻辑
  // ...

  // 调用next()继续路由更新
  next();

  // 在路由更新后恢复数据和方法
  this.data = preservedData;
  this.method = preservedMethod;
}

依然不好使哈

这里说下最后的解决思路:

定义一个状态isReloadChild:true

监控路由变化时, 先false,? 然后更改状态为true, 需要控制的组件v-if控制

简化代码如下

      this.isReloadChild = false;
      setTimeout(() => {
        this.isReloadChild = true;
      }, 0);

有用请点赞,养成良好习惯!

疑问、交流、鼓励请留言!

文章来源:https://blog.csdn.net/libusi001/article/details/134897644
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。