vue 父组件获取接口值传到子组件_vue 项目中 “父组件” 异步获取数据之后，传递给子组件不显示...

有两个组件：一个为 transaction(父组件)，一个为 transactionList (子组件)；

上图为一个列表页，为父组件，在父组件里面的data中定义了数据列表，

template中：

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 也成功了，但是貌似是没有传到子组件中，这是为什么？

子组件：

v-for="item in items"

:class="[item.status ? 'green' : 'red']">

交易金额：{{ item.tstMoney }} 元

取消消费：{{ item.tstMoney }} 元

{{ item.tstTime }}

消费门店：{{ item.tstAddress }}

预存支付：{{ item.tstJifen }}

积分支付：{{ item.tstYucun }}

其他支付：{{ item.tstElse }}

export default {

props: {

list: {

type: Array,

default: []

}

},

data () {

return {

items: this.list

}

}

}

父组件：

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()

}

}