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

2024-06-05 02:52:30

有两个组件：一个为 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()

}

}

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

vue项目中解决浏览器刷新vuex数据消失问题
vue项目中解决浏览器刷新vuex数据消失问题说明 vuex中的数据经过浏览器刷新后会消失,所以应设置在浏览器刷新之前将数据存入浏览器或者cookie中. 操作打开App.vue,在created ...
vue 父组件获取接口值传到子组件_vue父组件异步获取数据传给子组件的方法
但是现在问题是父组件的数据是异步获取的,而子组件一开始就会渲染,如果此时没有传入数据,而子组件又要用到数据中的length属性时就会报错: 怎么办呢?最简单的办法就是让子组件条件渲染,当有数据的时候才 ...
vue 方法获取返回值_Vue项目中Api的组织和返回数据处理的操作
项目中的所有Api配置放在一个文件中,便于查找和修改,Api的版本从配置文件(config.js)中读取,采用 apiPrefix + url 的形式组成. 在配置文件中,Api 的配置采用 Http ...
【实习小tip】多层dialog弹窗遮罩问题、elementUI的form表单组件的select框在只读的情况下没办法拿到传来的数据、从弹窗子组件获取数据后需要刷新页面
解决elementui多层dialog弹窗遮罩问题弹窗套娃出现了整个屏幕都是遮罩层的问题,需要鼠标点击一下才能正常. 在弹窗组件代码上加上 append-to-body 就可以了,表示这个弹窗是嵌在 ...
vue从后台获取新数据后刷新_vue项目中实现定时刷新页面（重新渲染数据实时更新）...
需求: 每隔一分钟自动刷新一下当前页面,同时发送请求,重新渲染数据,以到达实时更新. 开始: js有两种定时器 setInterval(function(){}, milliseconds)--会不停 ...
vue使用ts 引入组件_vue项目中使用ts（typescript）入门教程
最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入T ...
list vue 删除后页面渲染_Vue项目中v-for数组删除第n项元素产生渲染错误问题及解决方法...
项目背景最近使用Vue(版本2.9)开发一个项目时,要生成表单列表,所以使用了v-for来做循环,循环里的元素(item)是一个子组件.同时每个元素都有删除按钮,点击后删除当前元素. 初始代码如下: ...
vue 引入pdf跨域问题怎么解决_VUE项目中的跨域问题
[摘要]跨域问题是前端开发人员比较常见的问题, 那么跨域出现的原因, 该如何解决跨域, VUE中对跨域又是怎样处理的呢 [作者]田鋆鹏一. 前端为什么会出现跨域问题? 跨域问题是浏览器同源策略限制, ...
vue 用户名重复验证_Vue项目中实现用户登录及token验证
在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: 1.第一次登录的时候,前端调后端的登陆接口,发送用户名和密码 2.后端收到请求,验证用户名和密码,验证成功,就给前端返回一个to ...

最新文章

热门文章