呀呼!呀呼! 2022-05-09 21:01 采纳率: 77.3%
浏览 101
已结题

为什么我访问Vue里面的Data中的tableData下的变量id的控制台输出结果是undefined,但是我访问控制台输出tableData结果发现tableData里面的id是有数据的

问题遇到的现象:为什么我访问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>

运行结果:

img


可以看出我通过console.log(_this.tableData);访问tableData是有数据的,而且里面的id变量也是有数据的;

img


可以看出我通过console.log(_this.tableData.id);访问tableData.id他给我输出一个undefined;

报错内容:目前无报错,不过因为他给我一个undefined传到我的Servlet里面导致了我空指针异常 ;

我的解答思路和尝试过的方法 :
搞了很久之后我怀疑是我的访问方式有问题,但是我在网上搜不到;
我想要达到的结果 :
获取正确的id数据,而不是undefined;

  • 写回答

1条回答 默认 最新

  • Heerey525 前端领域新星创作者 2022-05-09 21:31
    关注

    console.log(_this.tableData.id);//undefined
    是由于 _this.tableData 是一个数组,当然id是undefined,tableData里面的对象才有id,如tableData中第一个对象console.log(_this.tableData[0].id);

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 5月17日
  • 已采纳回答 5月9日
  • 创建了问题 5月9日

悬赏问题

  • ¥20 机器学习能否像多层线性模型一样处理嵌套数据
  • ¥20 西门子S7-Graph,S7-300,梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改,求解答!!
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗?在Android studio上该如何部署?
  • ¥20 docker里部署springboot项目,访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效