报错信息为无法获取到program.teacher 返回undefined

但是奇怪的是 program.title 都能获取到。。唯独获取不到多层的。。

模拟的数据

{

"program": {

"cover": "http://img1.3lian.com/2015/a1/28/d/113.jpg",

"title": "后期修图技巧",

"counts": 1960,

"rating": 3,

"price": 267.00,

"score": 4.8,

"video": "http://qiniu.vmovier.vmoviercdn.com/58f5ca1aa99c9.mp4",

"teacher": {

"avatar": "http://img5.duitang.com/uploads/item/201603/10/20160310124134_Aiuwf.jpeg",

"nickName": "Summer",

"introduct": "自由摄影师，摄影师"

}

store.js

import api from '../../api/program'

const state = {

program: {

list: [],

detail: {}

}

const getters = {

detail: state => state.program.detail

}

const mutations = {

// 获取课程详细信息

GET_PROGRAM_DETAIL (state, res) {

console.log('***',res)

state.program.detail = res

}

const actions = {

getProgramDetail( { commit } ) {

api.getProgramDetail(res => {

commit('GET_PROGRAM_DETAIL', res)

})

}

export default {

state,

getters,

mutations,

actions

}

index.vue 展示页面

:title="program.title"

:count="program.counts"

:rating="program.rating"

:score="program.score" />

active-color='#ccac7b'

v-model="index">

:selected="demo2 === item"

v-for="(item, index) in list2"

@click="demo2 = item"

:key="index">{{item}}

v-if="index === 0">

:src="program.video">

slot="content">

width="60" />

// import ***

export default {

created () {

this.$store.dispatch('getProgramDetail')

computed: mapGetters({

program: 'detail'

})

}

vuex异步获取数据_vuex 异步获取数据，却无法渲染页面相关推荐

vue调用接口获取后台数据_Vuex 存储||获取后台接口数据
如果你对 Vuex 有一定的了解的话呢,可以继续这一篇的学习了,如果没有的话, 建议先看一看我的上一篇 Vuex基础:地址在下面这篇接着上一篇: 这篇将利用到 Vuex的详解与使用和Vuex刷新数据 ...
vue 加载数据后渲染页面
问题描述: 在接口数据返回之前,页面开始渲染HTML,导致因为接口数据为undefined或' ' (空)报错. 解决方法: 等待接口数据返回后再渲染HTML 代码实现: 使用v-if来控制页面的渲染 ...
微信小程序 index.js获取app.js异步请求的动态数据
对于 "index.js不能获取app.js异步请求的动态数据" 这个问题,本人也是郁闷了好几分钟. 解决方法是:getApp().wxFunction().then(res =& ...
ajax请求数据 ztree_ajax 异步获取数据填充到表格显示(ajax) 文档(Options API) DataTables中文网...
描述(Description) 使用这个参数可以让 DataTables 像使用jQuery ajax 一样从一个数据源获取数据,最终获取到返回的数据来显示表格,DataTables 支持 Java ...
vue2 + vuex 高度还原饿了么 App，与官方后台真实数据交互，获取商品信息，实现登陆、购物车、下单等功能...
前言 vue2的发布后自己也研究了一段时间,奈何公司的技术栈是以react为主,没有机会好好利用vue2去做一个完整的项目.虽然写了几个demo,但和写一个完整的项目还是有很大差别的.于是自己想着用空 ...
laytpl遍历实体列表_Layui数据表格之获取表格中所有的数据方法
数据表格中的数据是通过直接赋值的方式.这里实际上思想是反过来的,将拿数据表格中的所有数据,转换为layui数据表格拿原始数据去渲染数据表格. 1.创建一个作用域合适的js对象数组用来保存数据表格中的原 ...
JAVA异步爬虫_Java 爬虫遇上数据异步加载，试试这两种办法！
这是 Java 爬虫系列博文的第三篇,在上一篇 Java 爬虫遇到需要登录的网站,该怎么办? 中,我们简单的讲解了爬虫时遇到登录问题的解决办法,在这篇文章中我们一起来聊一聊爬虫时遇到数据异步加载的问题 ...
【四二学堂】jquery方式ajax获取数据并渲染页面
var newsData = ''; var mydata = {"pageNum":obj.curr,"pageSize":"5"}; / ...
【Kotlin 协程】Flow 异步流 ② ( 使用 Flow 异步流持续获取不同返回值 | Flow 异步流获取返回值方式与其它方式对比 | 在 Android 中使用 Flow 异步流下载文件 )
文章目录一.使用 Flow 异步流持续获取不同返回值二.Flow 异步流获取返回值方式与其它方式对比三.在 Android 中使用 Flow 异步流下载文件一.使用 Flow 异步流持续获取 ...

vuex异步获取数据_vuex 异步获取数据，却无法渲染页面

{{ program.teacher ? program.teacher.nickName : '' }}

vuex异步获取数据_vuex 异步获取数据，却无法渲染页面相关推荐

最新文章

热门文章