vue能获取到数据数据却渲染不到页面上,为什么？

Question

问题描述

从后台可以拿到数据，并打印在控制台但是就是渲染不到页面，我也不知道是为什么，感觉都正常

问题出现的环境背景及自己尝试过哪些方法

尝试用let _this = this来代替this但是还是没用并且报出success是undefined的

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<el-table
ref="singleTable"
:data="tableData"
style="width: 100%">
<el-table-column
  type="index"
  width="50">
</el-table-column>
<el-table-column
  prop="topic"
  label="题目"
  width="120">
</el-table-column>
<el-table-column
  prop="truePro"
  label="通过率"
  width="120">
</el-table-column>
<el-table-column
  prop="difficulty"
  label="难度">
</el-table-column>
<el-table-column
  prop="questionSocre"
  label="评分">
</el-table-column>
</el-table>

js代码

data(){
 tableData: [
    {
      topic: "",
      truePro: "",
      difficulty: "",
      questionSocre: ""
    }
}

//自动加载

 mounted() {

this.getList();
  },
  methods: {

async getList() {

  let param = {
        pageNo: this.currentPage, //第几页
        pageSize: this.pagesize, //每页多少条
        prohibit: 1
  }
 
 let res = await cdService.getData(param);
 if(res.success){

   this.tableData=res.data;
   
 }
  console.log(res.data,"res1111111111111");

},
}

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

没有数据呢 你可以从后往前找问题 你在if外面打印res.data有值 但是你在if里面赋值的tableData 你需要在里面打印看看数据有没有

Answer 2

data(){
 tableData: [
    {
      topic: "",
      truePro: "",
      difficulty: "",
      questionSocre: ""
    }
}

你这个data要return没return，当然渲染不到页面上，并且tableData你掉了个]

Answer 3

所以你res里面有success字段么

Answer 4

装个Vue Devtools,能直观的看到你的组件现在是个什么情况，你可能根本没有赋值成功