TypeError: Cannot set properties of undefined (setting ‘xx‘)的问题及解决方法

 更新时间:2023年09月13日 09:42:29   作者:FBI HackerHarry浩  
这篇文章主要介绍了TypeError: Cannot set properties of undefined (setting ‘xx‘)的问题,本文给大家分享完美解决方案,需要的朋友可以参考下

TypeError: Cannot set properties of undefined (setting ‘xx‘) 

问题描述

我在编写axios请求后端数据的时候,一直出现下面的错误前端页面显示不出来。

报错:

TypeError: Cannot set properties of undefined (setting ‘xx’)

原因分析:

this指向的对象发生了变化(现在this代表axios对象),需要在函数前将this指向的对象提前保存一下

解决方案:

方法一:回调函数使用箭头函数来使用。(responde)=>{}

<template>
    <el-table :data="tableData" style="width: 100%" stripe>
        <el-table-column prop="name" label="姓名"  width="250" />
        <el-table-column prop="age" label="年龄" width="250" />
        <el-table-column prop="gender" label="性别" width="250" />
        <el-table-column prop="createTime" label="创建时间" width="250" />
        <el-table-column fixed="right" label="操作" width="250">
            <template #default>
                <el-button link type="primary" size="small">编辑</el-button>
                <el-button link type="primary" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>
<script>
    import axios from 'axios';
    export default {
        data() {
            return {
                tableData:[]
            }
        },
        created(){//为何 要在created 方法中 发请求,因为该方法 可以操作tableData属性
            // 解决方法一
            axios.get('http://localhost:9090/student') // url 请求后台的地址
                /*
                * .then(function (response) 这样写前端会报错
                * 报错信息:TypeError: Cannot set properties of undefined (setting 'tableData')at eval (Student.vue?401d:59:1)
                * 这样写是匿名函数,无法取到tableData的值,所以tableData的值为undefined,不能给undefined的变量赋值
                * 解决办法:1.改为箭头函数 2.将this重新赋值给新的变量
                */
                // .then(function (response) { //成功回调方法(访问后台成功,后台有数据返回,则进入该方法)
                .then(response=> { //成功回调方法(访问后台成功,后台有数据返回,则进入该方法)
                    console.log(response);
                    console.log(response.data)
                    this.tableData = response.data;
                })
                .catch(function (error) {//失败回调方法(访问后台失败,返回失败的信息,则进入该方法)
                    console.log(error);
                });
        },
        methods:{
        }
    }
</script>

方法二:暂存this。var th = this; 在内部用th.xx代替this.xx

   //解决办法二
        var th = this;
        axios.get('http://localhost:9090/student') // url 请求后台的地址
            .then(function (response) { //成功回调方法(访问后台成功,后台有数据返回,则进入该方法)
                console.log(response);
                console.log(response.data)
                th.tableData = response.data;
            })
            .catch(function (error) {//失败回调方法(访问后台失败,返回失败的信息,则进入该方法)
                console.log(error);
            });

到此这篇关于TypeError: Cannot set properties of undefined (setting ‘xx‘)的文章就介绍到这了,更多相关Cannot set properties of undefined内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • TypeScript实现单链表的示例代码

    TypeScript实现单链表的示例代码

    链表是一种物理存储单元上非连续、非顺序的存储结构,本文主要介绍了TypeScript实现单链表的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-08-08
  • JavaScript中九种常用排序算法

    JavaScript中九种常用排序算法

    不同的排序算法,执行效率有着天壤之别,本脚本用JavaScript演示了各种常见的排序算法,包括:冒泡排序、选择排序、插入排序、谢尔排序、快速排序(递归)、快速排序(堆栈)、归并排序、堆排序
    2014-09-09
  • JavaScript常用代码书写规范的超全面总结

    JavaScript常用代码书写规范的超全面总结

    这篇文章给大家全面总结了JavaScript常用代码的书写规范,分别利用推荐和不推荐的两种示例代码让大家更能直接的了解书写规范,其实关于javascript代码规范我们应该遵循古老的原则:“能做并不意味着应该做”,好了,下面我们就来一起看看吧。
    2016-09-09
  • layui(1.0.9)文件上传upload,前后端的实例代码

    layui(1.0.9)文件上传upload,前后端的实例代码

    今天小编就为大家分享一篇layui(1.0.9)文件上传upload,前后端的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS的replace方法

    JS的replace方法

    在javascript中,String的函数replace()简直太让人喜爱了。它灵活而强大的字符替换处理能力,这里简单介绍下,方便需要的朋友
    2013-12-12
  • 你可能不知道的前端算法之文字避让(inMap)

    你可能不知道的前端算法之文字避让(inMap)

    这篇文章主要给大家介绍了关于前端算法之文字避让的相关资料,对于这个知识相信很多的朋友都不知道,但看到效果会惊叹不已,实现这一个效果主要利用的是inMap文字避让功能,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2018-01-01
  • uniapp路由uni-simple-router实例详解

    uniapp路由uni-simple-router实例详解

    uni-simple-router专为uniapp打造的路由器,和uniapp深度集成,这篇文章主要给大家介绍了关于uniapp路由uni-simple-router的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • 兼容FireFox 用javascript写的一个画图函数

    兼容FireFox 用javascript写的一个画图函数

    兼容FireFox 用javascript写的一个画图函数...
    2007-08-08
  • TypeScript Pinia实战分享(Vuex和Pinia对比梳理总结)

    TypeScript Pinia实战分享(Vuex和Pinia对比梳理总结)

    这篇文章主要介绍了TypeScript Pinia实战分享(Vuex和Pinia对比梳理总结),今天我们再来实战下官方推荐的新的vue状态管理工具Pini,感兴趣的小伙伴可以参考一下
    2022-06-06
  • 用JavaScript实现字符串切分功能

    用JavaScript实现字符串切分功能

    用JavaScript实现字符串切分功能...
    2007-01-01

最新评论