Vue中一个计算属性依赖了一个异步请求的数据,数据请求完成数据更新了但是视图没更新。

happy blue
  • 1
新手上路,请多包涵

RecordModel.ts //数据模块

import axios from 'axios'

type recordModel = {
    RecordList: RecordItem[]
    getRecord: () => {}
}

const RecordModel:recordModel = {
    RecordList:[],
    async getRecord(){
        await axios.get('http://xxxx').then((response)=>{
            this.RecordList = response.data.vuedata
        })
    }
}

async function getRecordModel(){
    await RecordModel.getRecord()
    return RecordModel
}

export {getRecordModel}

showRecord.vue //视图

<template>
<div>{{recordList}}</div>
</template>
<script lang="ts">
export default class ShowRecord extends Vue {
    //计算属性 ts 写法 
    get recordList(){
        const hash:{[key:string]:RecordItem[]} = {}
        getRecordModel().then((result:any)=>{
            result.RecordList.forEach((record:RecordItem[])=>{
                const key = record.date
                if(!(key in hash)){
                    this.$set(hash,key,[])
                }
                hash[key].push(record)
            })
        })
        console.log(hash) //空对象
        setTimeout(()=>{
            console.log(hash) //有数据 但是视图没有更新
        },1000)
        return hash
    }
}

</script>
回复
阅读 253
3 个回答

不明白你这个为什么要用计算属性呢,计算属性的话应该会时常读取这个属性,那就会多次执行这个异步函数。读取的时候由于hash是异步获取的,所以hash返回的还是初始值{}

为什么要在计算属性里边写异步?Promise的.then会在最后执行,会先 return 出来空集合。

可以看下 Promise 的执行顺序

Vue官方文档中提到, 由于 JavaScript 的限制, 当你利用索引直接设置一个项,或者直接改变数组的长度时,Vue将不会检测到数据的变化。watcher没有监测到,从而不能引发视图的重新渲染。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏