vue实现动态给data函数中的属性赋值

 更新时间:2022年09月07日 12:00:13   作者:夜观山海  
这篇文章主要介绍了vue实现动态给data函数中的属性赋值,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue动态给data函数中的属性赋值

1.首先创建一个监视器,用来监视相关的属性

2.当这个相关的属性被修改的时候,在监视器中的handler函数中写处理逻辑即可

vue给data中的数据赋值报错

TypeError: Cannot set property ‘tableData‘ of undefined

问题背景

最近刚入门vue,有个典型的场景,也是简单的坑。就是需要通过axios请求数据之后,将数据赋予到data中的tableData,而table组件会根据tableData双向绑定自动渲染。

但是当我赋值的时候TypeError: Cannot set property 'tableData' of undefined。究竟怎么回事呢。

分析

代码看起来,好像并没有什么毛病。。。

export default {
  data() {
    return {
      total: 0, //默认数据总数
      searchParam:{
        limit: 10, //每页的数据条数
        page: 1, //默认开始页面
        certNumber: "",
        certLevel: "",
        certCompanyName: "",
      },
      tableData: []
    };
  },
onSearch: function(){
      axios.post('/api/certCompany/list2',JSON.stringify(this.searchParam))
      .then(function (response) {
        console.log(response);
        this.tableData=response.data.data;
        this.total=response.data.count;
      })
      .catch(function (error) {
        console.log(error);
      });
    }
};

然而问题是出来了this.tableData因为用了 function 函数 的原因,在函数里面,this是指向函数本身,已经不是外部的默认this了

解决方案

使用一个 that 指向 外部的this ,然后调用 that.tableData ,轻松搞定。

onSearch: function(){
      const that=this; //用that解决函数内部this指向问题 zhengkai.blog.csdn.net
      axios.post('/api/certCompany/list2',JSON.stringify(this.searchParam))
      .then(function (response) {
        console.log(response);
        that.tableData=response.data.data;
        that.total=response.data.count;
      })
      .catch(function (error) {
        console.log(error);
      });
    }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue获取或者改变vuex中的值方式

    vue获取或者改变vuex中的值方式

    这篇文章主要介绍了vue获取或者改变vuex中的值方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 利用vue + koa2 + mockjs模拟数据的方法教程

    利用vue + koa2 + mockjs模拟数据的方法教程

    这篇文章主要给大家介绍了关于利用vue + koa2 + mockjs模拟数据的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • 启动myvue报错npm ERR! code ENOENT npm ERR! syscall open的解决办法

    启动myvue报错npm ERR! code ENOENT npm ERR! syscall open的解

    这篇文章主要介绍了启动myvue报错npm ERR! code ENOENT npm ERR! syscall open的解决办法,文中给出了详细的解决方法,并通过图文结合的方式介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • vuex的几个属性及其使用传参方式

    vuex的几个属性及其使用传参方式

    这篇文章主要介绍了vuex的几个属性及其使用传参,本文结合实例代码给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-01-01
  • Vue的MVVM实现方法

    Vue的MVVM实现方法

    本篇文章主要主要介绍了Vue的MVVM实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • vue实现盒子内拖动方块移动的示例代码

    vue实现盒子内拖动方块移动的示例代码

    这篇文章主要给大家介绍了如何通过vue实现盒子内拖动方块移动,文章通过代码示例讲解的非常详细,具有一定的参考价值,感兴趣的小伙伴可以参考阅读本文
    2023-08-08
  • 聊聊Vue 中 title 的动态修改问题

    聊聊Vue 中 title 的动态修改问题

    这篇文章主要介绍了 Vue 中 title 的动态修改问题,文中通过两种方案给大家介绍了title的传递问题 ,需要的朋友可以参考下
    2019-06-06
  • Vue使用Canvas绘制图片、矩形、线条、文字,下载图片

    Vue使用Canvas绘制图片、矩形、线条、文字,下载图片

    这篇文章主要介绍了Vue使用Canvas绘制图片、矩形、线条、文字,下载图片的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • 详解vue-class迁移vite的一次踩坑记录

    详解vue-class迁移vite的一次踩坑记录

    本文主要介绍了vue-class迁移vite的一次踩坑记录,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • vuedraggable拖拽到目标区域实现过程解析

    vuedraggable拖拽到目标区域实现过程解析

    这篇文章主要为大家介绍了vuedraggable拖拽到目标区域实现过程解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06

最新评论