vue问题日常_onerror this.$set()-优快云博客

本文链接：https://blog.youkuaiyun.com/yf_csdn_new/article/details/88680091

博客主要记录了前端开发中的常见问题及解决思路。包括数据更新时视图未更新、修改操作取消时回滚数据（可将初始数据保存为字符串备份）、axios post请求后端收不到参数，以及加载图片失败时设置默认图片等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、数据更新时视图没有更新：

Vue.set(obj, index, data);
this.$set(obj, index, data);
// obj: 要改变的对象
// index: 要改变的对象的序号
// data: 新数据

2、修改操作取消时回滚到初始数据：

可将初始数据另保存为字符串格式，用JSON.stringify()去做一个备份。

3、axios post请求，后端收不到参数：

// 第一种：用new FormData()的方式传递数据。
    let data = new FormData();
    data.append('userId','1');
    this.axios.post("/url", data)...
// 第二种：用字符串拼接的方式。
    this.axios.post("/url", `name=xx&userId=1`)...

4、加载图片失败时设置默认图片：

<img width="100%" :src="dialogImageUrl" :onerror="errorImg" alt="">

export default{
    data(){
        return{
            errorImg: `this.src='${require('../assets/img/error.jpg')}'`
        }
    }
}

/*
 * 也可再main.js中将其挂载在vue原型中，如此不用在每个模块中定义errorImg,注意改变图片路径
 * main.js-->Vue.prototype.errorImg = `this.src='${require('./assets/img/error.jpg')}'`;
 * <img width="100%" :src="dialogImageUrl" :onerror="this.errorImg" alt="">
 */