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

目录
  • vue动态给data函数中的属性赋值
  • 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);
      });
    }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue踩坑记录:属性报undefined错误问题

    vue踩坑记录:属性报undefined错误问题

    目录 vue属性报undefined错误 最终解决方法 vue之各种报错问题 vue属性报undefined错误 在一个组件里,通过props传值进去对象,在控制台打印报错误信息,提示某属性不存在. 例如: <div>{{data.param.aaa}}</div> 类似这种的,取对象子级下面的值,就报了undefined. 原因应该是在初始传值,最多默认 data={}. 我尝试在props里设置好默认值,但是依然报错 这么设置的props: props:{     data:O

  • vue 数据(data)赋值问题的解决方案

    vue 数据(data)赋值问题的解决方案

    总结一下我遇到的一个纠结很久的问题. 在项目中需要用到后台的数据对前端渲染,使用到了vue整合的axios,使用vue中的钩子函数在页面组件挂载完成之后向后台发送一个get请求然后将返回后的数据赋值data()中定义的属性: 执行后前端报错: 原因: 在请求执行成功后执行回调函数中的内容,回调函数处于其它函数的内部this不会与任何对象绑定,为undefined. 解决方案: 一)将指向vue对象的this赋值给外部方法定义的属性,然后在内部方法中使用该属性 二)使用箭头函数 补充:解决 vue

  • 浅谈vue使用axios的回调函数中this不指向vue实例,为undefined

    今天在vue-cli脚手架搭建的项目中使用axios时,遇到无法解析this.$route的报错信息,最后发现是作用域的问题. 1.解决方法:使用 => 原代码: axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); 修改为: axios.get('/u

  • Vue使用watch监听一个对象中的属性的实现方法

    问题描述 Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动,触发相应的方法,比如 queryData: { name: '', creator: '', selectedStatus: '', time: [], }, 第一种解决方案:直接对象 现在我需要监听这个queryData,我可以这样做: watch: { queryData: { handler: function() { //do something }, deep: true } } 第二种解决方案:dee

  • 浅谈vue中computed属性对data属性赋值为undefined的原因

    浅谈vue中computed属性对data属性赋值为undefined的原因

    目录 场景: 原因: _init中初始化 _init中做了什么? 在initState()做了这些事情 解决办法: 场景: 我在computed中return了一个值,然后在data中直接将它复制给另一个属性.结果data中的属性值为undefined… 代码示例: timer为undefined… 原因: 在这里很容易想到是执行顺序的问题,computed中的属性和data中的属性最终都会加载到app这个实例下.如果data中的实例属性被创建完成的时候,computed中的实例属性还没被创建,

  • 通过实例了解js函数中参数的传递

    通过实例了解js函数中参数的传递

    先看一道JS的笔试题: var setObj=function(o){ o.name="xiaoming"; o={}; o.name="xiaohong"; } var p={name:"xixi",age:24}; setObj(p); console.log(p); 答案是{name:xiaoming,age24}: 在JavaScript中函数参数默认为引用类型. 一.函数传递值类型: 代码实例如下: function addNum(nu

  • Vue中通过Vue.extend动态创建实例的方法

    在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点击按钮显示一个对话框或者弹出一条信息.我们通常会提前写好这个组件,然后通过v-if = "show"来控制它的显示隐藏.如下所示: <div> <button @click = "show = !show">弹出</button> <span v-if = "show">这是一条通过按钮控制显示隐藏的信息</span>

  • Vue在自定义指令绑定的处理函数中传递参数

    目录 在自定义指令绑定的处理函数中传递参数 需求背景 方式一:包装函数 方式二:利用动态参数 在自定义指令中的传递参数时value和expression的区别 注意点 总结 在自定义指令绑定的处理函数中传递参数 需求背景 现在需要为自定义指令绑定函数,并且需要向函数中传递参数,类似 v-on="handleFunc(arg1, arg2)". Vue 的指令预期得到的值是一个 JavaScript 表达式,除了 v-on 和 v-for 这两个特殊指令外,其他的指令会自动计算该表达式的

  • vue 实现根据data中的属性值来设置不同的样式

    style动态赋值 margin-top的值 根据choosePaperFlag的值来设置 利用三元表达式 补充知识:vue 条件判断绑定内联样式 当需要判断条件来绑定内联样式时 可以三元运算符判断,然后绑定一个对象 :style="!areaCode || !phoneNumber || !receivedCode || !verification ? '{backgruond:#ccc}' : $store.state.store.config.background" 以上这篇vu

  • 浅谈在函数中返回动态的内存

    浅谈在函数中返回动态的内存

    1.有以下题目: #include <iostream> using namespace std; void GetMemeory(char* p) { p=(char*)malloc(sizeof(char)*100); } int main() { char *str=NULL; GetMemeory(str); strcpy(str,"Thunder"); strcat(str,"Downloader"); printf(str); system(

  • 浅谈function(函数)中的动态参数

    我们可向函数传递动态参数,*args,**kwargs,首先我们来看*args,示例如下: 1.show(*args) def show(*args): print(args,type(args)) #以元组的形式向列表传递参数 show(11,22,33,44,55,66) 首先我们定义了一个函数,函数show(*args)里面的*args可以接收动态参数,这里我们接收一个元组形式的参数,我们可以向show()里面传递很多参数,函数默认把这些参数作为一个元组进行接收. 2.show(**arg

  • vue 实现在函数中触发路由跳转的示例

    如下所示: <span @click="clickFn">点我</span> methods:{ clickFn:function(){ this.$router.go('/login');//其中login是你定义的一个路由模块 } 以上这篇vue 实现在函数中触发路由跳转的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

随机推荐