iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue实现动态给data函数中的属性赋值
  • 410
分享到

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

2024-04-02 19:04:59 410人浏览 安东尼
摘要

目录Vue动态给data函数中的属性赋值vue给data中的数据赋值报错问题背景分析解决方案vue动态给data函数中的属性赋值 1.首先创建一个监视器,用来监视相关的属性 2.当这

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);
      });
    }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue实现动态给data函数中的属性赋值

本文链接: https://www.lsjlt.com/news/167054.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue实现动态给data函数中的属性赋值
    目录vue动态给data函数中的属性赋值vue给data中的数据赋值报错问题背景分析解决方案vue动态给data函数中的属性赋值 1.首先创建一个监视器,用来监视相关的属性 2.当这...
    99+
    2024-04-02
  • Vue动态添加属性到data的实现
    目录一、场景例子二、原理分析三、解决方案一、场景例子 <body> <div id="app"> <p v-for="(valu...
    99+
    2022-11-13
    Vue 动态添加属性 Vue 添加属性
  • 浅谈vue中computed属性对data属性赋值为undefined的原因
    目录场景:原因:_init中初始化_init中做了什么?在initState()做了这些事情解决办法 :场景: 我在computed中return了一个值,然后在data中直接将它复...
    99+
    2024-04-02
  • jQuery如何实现动态给table赋值
    这篇文章主要介绍了jQuery如何实现动态给table赋值,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。html请忽视各种class,因为前...
    99+
    2024-04-02
  • vue中怎么给对象动态添加属性和值
    vue中怎么给对象动态添加属性和值,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。一、背景介绍:在vue中请求接口中,一个请求方法可能对应后台两...
    99+
    2024-04-02
  • vue中props赋值给data出现的问题及解决
    目录vue props赋值给data问题props赋值给data 数据变化例如vue props赋值给data问题 vue 中父组件向子组件传递数据用 props, 但是子组件是无法...
    99+
    2022-11-13
    vue中props赋值 props赋值给data vue props赋值问题
  • java中给实体对象属性的空值赋默认值
    目录给实体对象属性的空值赋默认值给实体类赋默认值通用方法给实体对象属性的空值赋默认值 private final String defaultStr = ""; private fi...
    99+
    2024-04-02
  • Vue.js中怎么动态为img的src属性赋值
    这篇文章将为大家详细讲解有关Vue.js中怎么动态为img的src属性赋值,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。需求是这样:ajax获取数据如下{ ...
    99+
    2024-04-02
  • java反射给对象属性赋值怎么实现
    Java反射可以通过`java.lang.reflect.Field`类来给对象的属性赋值。以下是一个示例代码: import ja...
    99+
    2023-10-27
    java
  • MyBatis拦截器:给参数对象属性赋值的实例
    该拦截器的作用:在进行增加、修改等操作时,给数据模型的一些通用操作属性(如:创建人、创建时间、修改人、修改时间等)自动赋值。该实现是在DAO层拦截,即存入DB前最后一层。后经分析,不是很合理,改为在service层拦截,用spring AO...
    99+
    2023-05-31
    mybatis 拦截器 参数
  • Spring中如何使用@Value注解实现给Bean属性赋值
    目录属性赋值@Value注解的定义:测试1.在添加了Spring依赖的Maven项目中创建2.在resources目录下创建一个配置文件person.properties3.创建配置...
    99+
    2024-04-02
  • JavaScript中怎么实现属性赋值
    这篇文章给大家介绍JavaScript中怎么实现属性赋值,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。原型链每个对象都有一个包含了一个或者多个对象的原型链,该对象正是这个原型链的起始对...
    99+
    2024-04-02
  • vue $set 实现给数组集合对象赋值
    vue $set 数组集合对象赋值 在vue自定义数组对象集合中,想要给每个数组对对象再添加一个属性和值。 // data定义一个集合对象 responseData:[ ...
    99+
    2024-04-02
  • vue中如何给data里面的变量增加属性
    目录给data里面的变量增加属性vue框架是使用mvvm模式我废话不多说直接上方法了 给data中的响应式对象动态添加属性给data里面的变量增加属性 vue框架是使用mv...
    99+
    2024-04-02
  • vue中怎么给data里面的变量增加属性
    这篇“vue中怎么给data里面的变量增加属性”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue中怎么给data里面的变量...
    99+
    2023-06-29
  • vue $set如何实现给数组集合对象赋值
    本篇内容主要讲解“vue $set如何实现给数组集合对象赋值”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue $set如何实现给数组集合对象赋值”吧!vue $set 数组集合对象赋值在vu...
    99+
    2023-06-20
  • vue如何给element-ui中的el-tabs动态设置label属性
    目录给element-ui中的el-tabs动态设置label属性关于element-ui-tabs标签的基本使用给element-ui中的el-tabs动态设置label属性 效果...
    99+
    2022-11-13
    vue element-ui element-ui中el-tabs 动态设置label属性
  • 怎么用vue的$set实现给数组集合对象赋值
    这篇“怎么用vue的$set实现给数组集合对象赋值”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看...
    99+
    2024-04-02
  • html中button标签的onclick属性赋值实现方法
    html中button标签的onclick属性赋值实现方法:1.创建html文件;2.在html文件中添加html架构代码;3.在html架构中的body标签里面使用button标签设置一个按钮并添加onclick属性事件;4.在html架...
    99+
    2024-04-02
  • 如何实现在网页中通过param name方式给ActiveX控件的属性赋值
    本篇内容主要讲解“如何实现在网页中通过param name方式给ActiveX控件的属性赋值”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何实现在网页中通过param name方式给Activ...
    99+
    2023-06-08
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作