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 39;xxxx39; 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 -=: 39;Retry39; and 39;int39;
我在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 39;components39; 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;