【Vue】vue 项目中 “父组件” 异步获取数据之后，传递给子组件不显示
有两个组件：一个为 transaction（父组件），一个为 transactionList （子组件）；
上图为一个列表页，为父组件，在父组件里面的data中定义了数据列表，
template中：
<transactionList :list="transactionList"></transactionList>js中：
data () {return {
transactionList: [...]
}
}
子组件通过 props 接受一个 list 显示出来没有问题。
但是，问题是，现在这些数据我通过 axios 取得：
methods: {getTransData () {
axios.get(httpUrl.getTransData)
.then(res => {
console.log(res.data.transData)
this.transactionList = res.data.transData
})
.catch(err => console.log(err))
}
},
created () {
this.getTransData()
}
created 的时候把数据获取到，然后赋值给 data 中的 transactionList ，
因为使用了 axios 获取数据，所以 data 中的 transactionList 为空数组：
transactionList: [ ]
但是这样写完之后，页面什么也不显示了，控制台输出之后发现数据也获取到了， 赋值给 this.transactionList 也成功了，但是貌似是没有传到子组件中，这是为什么？
子组件：
<template><div>
<div class="ui segment"
v-for="item in items"
:class="[item.status ? 'green' : 'red']">
<div class="ui list m-aa">
<div class="item" :class="[item.status ? 'text-green' : 'text-red']">
<h3 v-if="item.status">交易金额：{{ item.tstMoney }} 元</h3>
<h3 v-else>取消消费：{{ item.tstMoney }} 元</h3>
</div>
<div class="item m-gray">
{{ item.tstTime }}
</div>
</div>
<div class="ui list">
<div class="item">
消费门店：{{ item.tstAddress }}
</div>
</div>
<div class="ui bulleted list m-gray">
<div class="item">
预存支付：{{ item.tstJifen }}
</div>
<div class="item">
积分支付：{{ item.tstYucun }}
</div>
<div class="item">
其他支付：{{ item.tstElse }}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
list: {
type: Array,
default: []
}
},
data () {
return {
items: this.list
}
}
}
</script>
父组件：
<template><div class="m-bg">
<transactionList :list="transactionList"></transactionList>
</div>
</template>
<script>
import transactionList from '../components/transactionList'
import axios from 'axios'
import { httpUrl } from '../../http_url.js'
export default {
components: {
transactionList
},
data () {
return {
transactionList: []
}
},
methods: {
getTransData () {
axios.get(httpUrl.getTransData)
.then(res => {
// console.log(res.data.transData)
console.log(this.transactionList)
this.transactionList = res.data.transData
console.log(this.transactionList)
// console.log(this.transactionList)
})
.catch(err => console.log(err))
}
},
created () {
this.getTransData()
}
}
</script>
回答
子组件直接 渲染 list 就好了
你这 渲染的是items 不是你传进去的值
v-for="item in list "
data 可以不要了
因为进来的时候，你的list默认为空数组，子组件渲染的时候，props的值还没有传输进来，所以item等于空数组，给你两个方法。
1.直接渲染list，不要渲染item
2.建立一个watch,监听list变化，再赋值给item
console.log(this.transactionList) 有值吗
试试不使用验证
props:['list']列表渲染用list
这种问题猜测应该是子组件里面使用数据是问题；
你可以在计算属性中return prop中接收的数据，然后渲染这个计算属性即可。=----------------------------
看到子组件代码了。。
问题就是在data中返回了一个item。给item赋值的时候list是空数组，等list有值的赋值已经结束了。自然不会更新了。连个方案：
1、如上所说用计算属性
2、如果不会修改list，直接操作list即可
你子组件这么写就相当于：
list = []
item = list
list = [2333]
item 还是指向原来的空数组，并没有更新
errrredf
可以试一下用watch:{ }侦听，然后每获取一次就执行init()之类的函数
以上是 【Vue】vue 项目中 “父组件” 异步获取数据之后，传递给子组件不显示 的全部内容， 来源链接： utcz.com/a/77257.html
