呀呼!呀呼! 2022-05-07 00:39 采纳率: 77.3%
浏览 426
已结题

关于使用Element、vue、axios的HTML通过axios获取响应数据但是绑定到Element提供的表单上却不显示数据的问题

问题遇到的现象和发生背景

发生背景:itheima的javaweb课程学完vu、axios、element的综合案例
问题现象:
1、不使用Vue对象的mounted,而在Vue的外面写window.onload是不显示数据的,但是可以获取数据(我通过console.log发现是有数据输出的,是一个array)
2、在获取响应数据的时候,不把this的作用域提升,直接使用原来的this,发现也是可以获取数据,但是数据绑定在Element提供的表单上就不显示;
3、先把响应数据提取出来放进一个let brand里面,然后在遍历这个brand,一边遍历一边赋值给绑定表单的数据来源_this.tableData,但是也是不显示的情况

问题相关代码,请勿粘贴截图

现象1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element-Brand</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>

<div id="app">
<!--    搜索表单-->
    <el-form :inline="true" :model="brand" class="demo-form-inline">
    <el-form-item label="当前状态">
        <el-select v-model="brand.status" placeholder="当前状态">
            <el-option label="禁用" value="0"></el-option>
            <el-option label="启用" value="1"></el-option>
        </el-select>
    </el-form-item>

        <el-form-item label="企业名称">
            <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
        </el-form-item>
        <el-form-item label="品牌名称">
            <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
<!--    新增和批量删除两个按钮-->
    <el-row>
        <el-button type="primary" plain @click="dialogVisible=true">新增</el-button>
        <el-button type="danger" plain>批量删除</el-button>
    </el-row>
<!--    为添加按钮绑定一个对话框    -->
    <el-dialog
            title="编辑品牌"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
<!--        对话框里面的表单-->
        <el-form ref="form" :model="brand" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="brand.brandName"></el-input>
            </el-form-item>

            <el-form-item label="企业名称">
                <el-input v-model="brand.companyName"></el-input>
            </el-form-item>

            <el-form-item label="订单量">
                <el-input v-model="brand.ordered"></el-input>
            </el-form-item>

            <el-form-item label="备注" prop="description">
                <el-input type="textarea" v-model="brand.description"></el-input>
            </el-form-item>

            <el-form-item label="状态" prop="status">
                <el-switch active-value="1" inactive-value="0" v-model="brand.status"></el-switch>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="addBrandOnSubmit">提交</el-button>
                <el-button  @click="dialogVisible=false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>

    <!--    table-->
    <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">
            </el-table-column>
            <el-table-column
                    label="操作"
                    align="center">
                <el-row>
                <el-button type="primary">修改</el-button>
                <el-button type="danger">删除</el-button>
                </el-row>
            </el-table-column>
        </el-table>
    </template>
        <span class="demonstration">完整功能</span>
<!--    分页栏-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
        </el-pagination>
</div>
<script>
    window.onload=function () {
         var _this=this;
        axios.get("http://localhost:8080/ElementDemo/selectAllServlet").then(function (resp) {
            _this.tableData =resp.data; 
        })
    }
    new Vue({
        el:"#app"
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            //复选框选中之后执行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection);
            },
            //搜索表单提交
            onSubmit() {
                console.log('submit!');
            },
            addBrandOnSubmit() {
                console.log(this.brand);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        },
        data() {
            return {
                //搜索表单数据和新增品牌数据
                brand: {
                    status: '',
                    companyName: '',
                    brandName:'',
                    ordered: '',
                    description: ''
                },
                tableData: [{
                    brandName: '',
                    companyName: '',
                    ordered: '',
                    status:''
                }, {
                    brandName: '',
                    companyName: '',
                    ordered: '',
                    status:''
                }, {
                    brandName: '',
                    companyName: '',
                    ordered: '',
                    status:''
                }, {
                    brandName: '',
                    companyName: '',
                    ordered: '',
                    status:''
                },],
                //选中的复选框提取出来的数据集合模型
                multipleSelection: [],
                //对话框是否展示的标记,初始为false为不展示,点击新增按键,该模型同步更改为true展示
                dialogVisible: false,
                //当前页码数据
                currentPage: 4
            }
        }
    })
</script>
</body>
  </html>

PS:和表单绑定的数据为
:data="tableData"
情况2:PS:代码和上述重复太多,这里只粘贴出关键部分

<script>
new Vue({
        el:"#app",
         mounted(){
             axios.get("http://localhost:8080/ElementDemo/selectAllServlet").then(function (resp) {
                      this.tableData =resp.data;
                      console.log(this.tableData);
</script>

情况3:PS:代码和上述重复太多,这里只粘贴出关键部分

<script>
 new Vue({
        el:"#app",
         mounted(){           
             axios.get("http://localhost:8080/ElementDemo/selectAllServlet").then(function (resp) {   
                 let brands = resp.data;
                  for (var i = 0; i < brands.length; i++) {
                      _this.tableData = brands[i];
                     console.log(_this.tableData);
                  }
        })
         },
</script>

正确的代码:PS:代码和上述重复太多,这里只粘贴出关键部分

 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);
         })
         },

运行结果及报错内容 :
情况1:

img


可以看出来获取的数据
情况2:

img


可以看出来获取的数据,而且和情况1的数据一样
情况3:

img


也是可以获取数据,但是这里开始数据的控制台输出模式不一样了

正确的结果:

img

我想达到的结果:以上三种情况既然都可以获取数据,所以应该都可以展示出来数据才对

  • 写回答

2条回答 默认 最新

  • 雾里桃花 2022-05-07 09:21
    关注

    首先你在el-table中绑定的这个 tableData,它必须要在vue实例里面进行赋值

    img

    这里的this指向的不是vue,而是window,也就是说,你的this.tableData = res.data,并没有赋值到vue实例里面,而是直接绑定在了window上 vue中的模板语法只能渲染注册在vue实例里的数据

    img

    如果你想渲染axios请求来的数据,那么你只能在vue实例中的 created生命周期 和 mounted 生命周期里使用这个操作

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

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

悬赏问题

  • ¥15 关于#linux#的问题(输入输出错误):出现这个界面接着我重新装系统,又让修电脑的师傅帮我扫描硬盘(没有问题)用着用着又卡死(相关搜索:固态硬盘)
  • ¥15 cv::resize不同线程时间不同
  • ¥15 web课程,怎么做啊😭没好好听课 根本不知道怎么下手
  • ¥15 做一个关于单片机的比较难的代码,然后搞一个PPT进行解释
  • ¥15 python提取.csv文件中的链接会经常出现爬取失败
  • ¥15 数据结构中的数组地址问题
  • ¥15 maya的mel里,怎样先选择模型A,然后利用mel脚本自动选择有相同名字的模型B呢。
  • ¥15 Python题,根本不会啊
  • ¥15 会会信号与系统和python的来
  • ¥15 关于#python#的问题