VUE.JS 使用axios資料請求時資料繫結時 報錯 TypeError: Cannot set property 'xxxx' of undefined 的解決辦法
正常情況下在data裡面都有做了定義
在函式裡面進行賦值
這時候你執行時會發現，資料可以請求到，但是會報錯 TypeError: Cannot set property 'listgroup' of undefined
主要原因是：
在 then的內部不能使用Vue的例項化的this, 因為在內部 this 沒有被繫結。
可以看下 Stackoverflow 的解釋：
解決辦法：
1、用ES6箭頭函式，箭頭方法可以和父方法共享變數
2、在請求axios外面定義一下 var that=this
問題解決
相關推薦
VUE.JS 使用axios資料請求時資料繫結時 報錯 TypeError: Cannot set property 'xxxx' of undefined 的解決辦法
正常情況下在data裡面都有做了定義 在函式裡面進行賦值 這時候你執行時會發現，資料可以請求到，但是會報錯 TypeError: Cannot set property 'listgroup' of undefined 主要原因是： 在 then的內部不能使用Vue的例項
vue 報錯：Cannot read property 'xxx' of undefined"，但是頁面能渲染上資料
有時候會遇到給頁面繫結資料的時候，可以繫結成功，但vue warn:xxx屬性of undefined，，，如果本元件只是繫結簡單的資料倒是可以忽略，如果本元件還引入了其他元件或第三方元件，外掛，則就渲染不出來，就需要解決了， <template>
Vue.js筆記-表單控制元件繫結
基礎語法 可以用v-model指令在表單控制元件元素上建立雙向資料繫結，根據控制元件型別它自動選取正確的方法更新元素。 text <span>Message is
Vue.js 元件中的v-on繫結自定義事件理解
每個 Vue 例項都實現了事件介面(Events interface)，即： 使用 $on(eventName) 監聽事件 使用 $emit(eventName) 觸發事件 Vue的事件系統分離自瀏覽器的EventTarget API。儘管它們的執行類似，
Vue.js:Select--Option >下拉框繫結和取值
遇到了這個解決了，所以記錄一下： 完成vue.js下拉框選擇繫結與取值，實現效果圖如下： template程式碼 <template> <div> <Form :model="form
解決pip安裝時出現報錯TypeError: unsupported operand type(s) for -=: 'Retry' and 'int'
我在Linux下使用pip安裝時出現報錯： Exception: Traceback (most recent call last): File "/usr/lib/python2.7/dist-packages/pip/basecommand.py", line 215, in m
vue-cli3 typescript Uncaught TypeError: Cannot set property 'components' of undefined
vue-cli3 typescript 原因是 @Component({}) export default class Child extends Vue { 上面沒有加 @Component({}) 導致的， 加上 @Component(
Vue.js學習筆記——請求資料的幾種方式（v-resource，axios）
一、 v-resource 1. 在搭建好腳手架之後，安裝v-resource ——npm/cnpm install v-resource --save 2. 在main.js中進行註冊 import VueResource from 'vu
Vue.js的元件（四）父元件與子元件的資料聯絡 之 雙向繫結
之前有說到，父元件傳資料到子元件是通過元件的屬性props來實現的，這是一種單向繫結。父可以影響子，子不能影響父。 但是子可以通過自定義事件來讓自己的資料影響到父。 只要把這兩種方法結合起來，就可以
vue使用axios非同步請求後端資料的使用
Vue 原本有一個官方推薦的 ajax 外掛 vue-resource，但是自從 Vue 更新到 2.0 之後，官方就不再更新維護 vue-resource，並推薦axios，目前主流的 Vue 專案，都選擇 axios 來完成 ajax 請求。使用方法：方案一：改原型1.安
vue.js（8）雙向資料繫結
雙向資料繫結：一定要有一個輸入的地方，一定要有一個輸出的地方//index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <tit
Vue.js解析(三)【從Vue.js原始碼角度再看資料繫結】
資料繫結原理 前面已經講過Vue資料繫結的原理了，現在從原始碼來看一下資料繫結在Vue中是如何實現的。 首先看一下Vue.js官網介紹響應式原理的這張圖。 這張圖比較清晰地展示了整個流程，首先通過一次渲染操作觸發Data的getter（這裡保證只有檢視
Vue.js 通過jQuery ajax獲取資料實現更新後重新渲染頁面
1. 引入jquery和vue.js <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script
VUE如何提交Table資料（解決相同屬性多條資料不能雙向繫結的問題）
類似這樣的： 解決方案：用陣列形式提交 使用v-for來遍歷渲染，提交過去的就已經是每行的值組成陣列 1.前端程式碼 <table class="table"> <thead> <tr> <th>box</t
vue-resource+jsonplaceholder模擬請求後臺資料
最近在學習 vue，在用 vue-resource 外掛的時候發現用來練習請求後臺資料的站點 vue.studyit.io 好像掛了，後來通過文章 Vu文章resource三種請求格式和萬能測試地址 找到了另一個可用的，雖然這個站點好像沒有提供新增和刪除資料的介面，但起碼稍微
vue.js ajax獲取的非同步資料處理
一、安裝 1、 利用npm安裝npm install axios --save 2、 利用bower安裝bower install axios --save 3、 直接利用cdn引入<script src="https://unpkg.com/axios/dist/a
axios 網路請求與資料下載
axios 一、先引入js 第一種：通過cdn載入 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 第二種：通過npm或者cnpm載入 $
vue.js 跨域請求 fetch / axios
跨域請求配置 在vue專案下 找到 config > index.js 檔案;修改 index.js 檔案下的 proxyTable 物件的內容；如下 proxyTable: { '/api': { //
vue的單向資料流和雙向繫結解釋
Vue 在不同元件間強制使用單向資料流。這使應用中的資料流更加清晰易懂。資料只能從父元件到子元件或是反向。 雙向繫結v-model是同時實現bind attribute(value)和Listen
SpringMVC 資料繫結時，表單輸入值與實體資料型別一一對應的問題
SpringMVC 資料繫結的一個小小的錯誤，竟浪費了不少時間，趕緊記下來，免得重蹈覆轍。 Model public class Student{ private String name;