浏览器报错:Cannot read property ‘push’ of undefined at XMLHttpRequest.ajaxObj.onreadyst
vue中发送Http请求,这里说明不会使用axios ,baseUrl已经有过了,不想在创建baseUrl,所以采用http请求,请求发送成功。
因为跨域原因,所以内部this不能赋值。
xhr.onreadystatechange = function()导致此引用更改为XMLHttpRequest对象.因此,this.customerArray不再存在.为了避免这种情况,请为原始的this创建新的引用:
<template><div class="app-container"><el-row :gutter="20"><!-- 部门数据,搜索框--><el-col :span="6" :xs="24"><div class="head-container"><el-inputv-model="symbolName"placeholder="请输入部门名称"clearablesize="small"prefix-icon="el-icon-search"style="margin-bottom: 20px"/></div><div class="head-container" style="height:600px"><el-scrollbar style="height:700px"><el-treeref="tree"class="filter-tree":data="datas":props="defaultProps":expand-on-click-node="false":filter-node-method="filterNode"@node-click="handleNodeClick"/></el-scrollbar></div></el-col></el-row></div></template><script>export default {name: 'Standard',// 把变量作为全局变量初始化(重点)treeData: [],treeDatas: [],data() {return {// 遮罩层loading: true,trees: {symbolName: '',childNodes: []},datas: [],//defaultProps: {children: 'childNodes',label: 'symbolName'}}},created() {this.getList()},methods: {/** 查询性能列表 */getList() {this.loading = false// 创建XML请求var ajaxObj = new XMLHttpRequest()// 以get形式进行发送请求ajaxObj.open('get', 'http://192.168.12.76:800/iserver/services/plot-jingyong/rest/plot/symbolLibs/10.json')// 请求结束断开ajaxObj.send()// 初始化变量(必要)this.trees = {}this.treeData = []// 转入: this转为function()方法内部函数(重点)const that = thisajaxObj.onreadystatechange = function() {if(ajaxObj.readyState === 4 && ajaxObj.status === 200){// debugg// 请求放回的结果以文本形式,使用JSON.parse()方法进行转为json形式var data = JSON.parse(ajaxObj.responseText)var item = data.rootSymbolLibNodeconsole.log('数据返回成功', data.rootSymbolLibNode)that.trees = {symbolName: item.symbolName,childNodes: item.childNodes,symbolNodeType: item.symbolNodeType}that.treeData.push(that.trees)}}this.treeDatas = that.treeData// 转出:内部that指向vue中的thisthis.datas = this.treeDatas},// 点击树节点handleNodeClick(node) {console.log(node)},// 节点筛选filterNode(value, data) {if (!value) return truereturn data.label.indexOf(value) > 0},}}</script>