问题遇到的现象:为什么我访问Vue里面的Data中的tableData下的变量id的控制台输出结果是undefined,但是我访问控制台输出tableData结果发现tableData里面的id是有数据的;
访问方式:
new Vue({
el:"#app",
mounted(){
var _this=this;
axios.get("http://localhost:8080/ElementDemo/selectAllServlet").then(function (resp) {
console.log(_this.tableData);//有数据
console.log(_this.tableData.id);//undefined
发生背景 :itheima javaweb课程最后面利用Element、vue、axios的综合案例之删除品牌
问题相关代码:PS:(为了突出重点,只贴出关键部分)
<script>
new Vue({
el:"#app",
mounted(){
var _this=this;
axios.get("http://localhost:8080/ElementDemo/selectAllServlet").then(function (resp) {
_this.tableData =resp.data;
console.log(_this.tableData);//有数据
console.log(_this.tableData.id);//undefined
})
},
data() {
return {
tableData: [{
brandName: '',
companyName: '',
ordered: '',
status:'',
id:''
}, {
brandName: '',
companyName: '',
ordered: '',
status:'',
id:''
}, {
brandName: '',
companyName: '',
ordered: '',
status:'',
id:''
}, {
brandName: '',
companyName: '',
ordered: '',
status:'',
id:''
}, {
brandName: '',
companyName: '',
ordered: '',
status: '',
id: ''
}]
}
}
})
<template>
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
type="index"
width="50">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
align="center"
>
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center"
>
</el-table-column>
<el-table-column
prop="ordered"
label="订单量"
align="center">
</el-table-column>
<el-table-column
prop="status"
label="当前状态"
align="center"
translate="translateStatus">
</el-table-column>
<el-table-column
prop="id"
label="id"
align="center"
>
</el-table-column>
<el-table-column
label="操作"
align="center">
<el-row>
<el-button type="primary" >修改</el-button>
<el-button type="danger" @click="deleteBrandById">删除</el-button>
</el-row>
</el-table-column>
</el-table>
</template>
运行结果:
可以看出我通过console.log(_this.tableData);访问tableData是有数据的,而且里面的id变量也是有数据的;
可以看出我通过console.log(_this.tableData.id);访问tableData.id他给我输出一个undefined;
报错内容:目前无报错,不过因为他给我一个undefined传到我的Servlet里面导致了我空指针异常 ;
我的解答思路和尝试过的方法 :
搞了很久之后我怀疑是我的访问方式有问题,但是我在网上搜不到;
我想要达到的结果 :
获取正确的id数据,而不是undefined;