在Vue项目中，父组件（transaction）通过axios异步获取接口数据并赋值给transactionList，但在子组件（transactionList）中无法显示。数据获取成功并已正确赋值，但子组件的v-for循环未更新。子组件通过props接收list参数，数据类型为Array。问题可能在于数据更新时，子组件未能监听到父组件的变更。
有两个组件：一个为 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()
}
}
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
