黄金拂晓 2020-04-02 11:56 采纳率: 0%
浏览 3861
已结题

vue+element 后台获取到数据,但列表不显示问题

需要调用 this.getDict();方法获取数据,可以在页面使用

mounted() {
            this.getDict();
            this.getRows()
},
    getDict() {
            GetAll(this.query).then(res => {
                this.rows = res.data.data
                this.$set(this,'nameList',unified(this.rows))
                console.log("this.nameList2", this.nameList)
            })
                console.log("this.nameList3", this.nameList)
    },
<el-table-column label="菜单" min-width="250" align="center">
                <template slot-scope="scope">
                    {{translate(scope.row.pid,nameList)}}
                </template>
</el-table-column>

在列表页面菜单字段有个方法,根据pid到nameList寻找并显示菜单名称,
如果用this.getDict(); 方法获取,this.nameList2可以打印出数据,this.nameList3是空的,列表页面也是空的,
如果在computed里写死nameList,页面是可以显示菜单名称的
{{translate(scope.row.pid,nameList)} 这个方法没有问题

        computed: {
            nameList: function() {
                return [{
                    'pid': '0001',
                    'label': '标题分类'
                }, {
                    'pid': '0002',
                    'label': '新闻'
                },
            } 
        },
  • 写回答

1条回答 默认 最新

  • lshen01 2023-03-17 01:08
    关注

    参考GPT和自己的思路:

    根据你提供的代码和描述,可能存在异步获取数据的问题。由于获取数据是异步的,可能会导致在页面渲染时数据还没有获取到,从而未能渲染出列表。你可以尝试在获取数据后通过触发重新渲染来解决这个问题:

    1. 在获取数据后,手动触发重新渲染:
    this.$forceUpdate();
    
    1. 或者在获取数据后,将获取到的数据赋值给新的变量,然后将新变量赋值给原来的变量,从而触发更新:
    let newList = unified(this.rows);
    this.nameList = newList.slice();
    

    以上两种方法都可以在异步获取数据后,通过重新渲染列表来解决问题。希望能够帮助你解决这个问题。

    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 12月26日

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题