vue實(shí)現(xiàn)動(dòng)態(tài)給data函數(shù)中的屬性賦值

更新時(shí)間：2022年09月07日 12:00:13 作者：夜觀山海

這篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)給data函數(shù)中的屬性賦值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue動(dòng)態(tài)給data函數(shù)中的屬性賦值

1.首先創(chuàng)建一個(gè)監(jiān)視器，用來(lái)監(jiān)視相關(guān)的屬性

2.當(dāng)這個(gè)相關(guān)的屬性被修改的時(shí)候，在監(jiān)視器中的handler函數(shù)中寫(xiě)處理邏輯即可

vue給data中的數(shù)據(jù)賦值報(bào)錯(cuò)

TypeError: Cannot set property ‘tableData‘ of undefined

問(wèn)題背景

最近剛?cè)腴T(mén)vue，有個(gè)典型的場(chǎng)景，也是簡(jiǎn)單的坑。就是需要通過(guò)axios請(qǐng)求數(shù)據(jù)之后，將數(shù)據(jù)賦予到data中的tableData，而table組件會(huì)根據(jù)tableData雙向綁定自動(dòng)渲染。

但是當(dāng)我賦值的時(shí)候TypeError: Cannot set property 'tableData' of undefined。究竟怎么回事呢。

分析

代碼看起來(lái)，好像并沒(méi)有什么毛病。。。

export default {
  data() {
    return {
      total: 0, //默認(rèn)數(shù)據(jù)總數(shù)
      searchParam:{
        limit: 10, //每頁(yè)的數(shù)據(jù)條數(shù)
        page: 1, //默認(rèn)開(kāi)始頁(yè)面
        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);
      });
    }
};

然而問(wèn)題是出來(lái)了this.tableData因?yàn)橛昧?function 函數(shù) 的原因，在函數(shù)里面，this是指向函數(shù)本身，已經(jīng)不是外部的默認(rèn)this了

解決方案

使用一個(gè) that 指向外部的this ，然后調(diào)用 that.tableData ，輕松搞定。

onSearch: function(){
      const that=this; //用that解決函數(shù)內(nèi)部this指向問(wèn)題 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);
      });
    }

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

基于Vue3與免費(fèi)滿血版DeepSeek實(shí)現(xiàn)無(wú)限滾動(dòng)+懶加載+瀑布流模塊及優(yōu)化過(guò)程
在進(jìn)行非完全標(biāo)準(zhǔn)化數(shù)據(jù)的可視化展示時(shí),瀑布流是一種經(jīng)常被采用的展示方法,瀑布流能夠有效地將不同大小規(guī)格的內(nèi)容以一種相對(duì)規(guī)整的方式呈現(xiàn)出來(lái),本文給大家介紹了基于Vue3與免費(fèi)滿血版DeepSeek實(shí)現(xiàn)無(wú)限滾動(dòng)+懶加載+瀑布流模塊,需要的朋友可以參考下
2025-03-03
VUE2.0+ElementUI2.0表格el-table實(shí)現(xiàn)表頭擴(kuò)展el-tooltip
這篇文章主要介紹了VUE2.0+ElementUI2.0表格el-table實(shí)現(xiàn)表頭擴(kuò)展el-tooltip，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-11-11
Vue-drag-resize 拖拽縮放插件的使用(簡(jiǎn)單示例)
本文通過(guò)代碼給大家介紹了Vue-drag-resize 拖拽縮放插件使用簡(jiǎn)單示例,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-12-12
在vue中實(shí)現(xiàn)禁止屏幕滾動(dòng),禁止屏幕滑動(dòng)
這篇文章主要介紹了在vue中實(shí)現(xiàn)禁止屏幕滾動(dòng),禁止屏幕滑動(dòng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
vue實(shí)現(xiàn)登錄類(lèi)型切換
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登錄類(lèi)型切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
Vue3+TS+Vite+NaiveUI搭建一個(gè)項(xiàng)目骨架實(shí)現(xiàn)
本文主要介紹了Vue3+TS+Vite+NaiveUI搭建一個(gè)項(xiàng)目骨架實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
element-ui中el-row中設(shè)置:gutter間隔不生效問(wèn)題
這篇文章主要介紹了element-ui中el-row中設(shè)置:gutter間隔不生效問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
安裝@vue/cli報(bào)錯(cuò)npmERR gyp ERR問(wèn)題及解決
這篇文章主要介紹了安裝@vue/cli報(bào)錯(cuò)npmERR gyp ERR問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
關(guān)于vue雙向綁定帶來(lái)的問(wèn)題及解決
這篇文章主要介紹了關(guān)于vue雙向綁定帶來(lái)的問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue使用axios進(jìn)行數(shù)據(jù)異步交互的方法
大家都知道在Vue里面有兩種出名的插件能夠支持發(fā)起異步數(shù)據(jù)傳輸和接口交互,分別是axios和vue-resource,同時(shí)vue更新到2.0之后,宣告不再對(duì)vue-resource更新,而是推薦的axios,今天就講一下怎么引入axios,需要的朋友可以參考下
2024-01-01