vue父组件异步获取动态数据传递给子组件获取不到值
原理:
在父组件中使用axios获取异步数据传给子组件,但是发现子组件在渲染的时候并没有数据,在created里面打印也是空的,结果发现一开始子组件绑定的数据是空的,在请求数据没有返回数据时,子组件就已经加载了,并且他绑定的值也是空的
vuex / index.js
import Vue from 'vue'
import Vuex from 'vuex' import axios from 'axios' Vue.use(Vuex) export default new Vuex.Store({ //定义初始数据 state: { title: '', list: [], isShow: false }, //同步的方法 mutations: { //向state 里面设置数据 changeListMutation(state, list) { state.list = list }, //在list.vue里面点击下拉选项的时候触发 给state.title赋值 changeTitleMutation(state, title) { state.title = title }, //selectinput.vue里面点击input的时候触发 给state.isShow赋值 toggleShow(state, isShow) { state.isShow = isShow } }, //异步的方法 actions: { //在list.vue里面created生命周期里面触发 getListAction({ commit }) { axios.get('/mock/5afd9dc0c088691e06a6ab45/example/dataList') .then((res) => { commit('changeListMutation', res.data) //调用mutations下面的changeListMutation方法并且传值过去 }) .catch((error) => { console.log(error) }) } } })
父组件 select.vue
<template><div class="select"> <div class="wrap"> <selectInput></selectInput> <list></list> </div> </div> </template> <script> // 引入子组件 import selectInput from '@/components/selectInput' import list from '@/components/list' export default { components:{ //加载子组件 selectInput, list }, } </script> <style> .select{ background:#4a56fe; width: 400px; margin: 100px auto 0; padding: 40px; border-radius: 10px; } .wrap{ background: #e3e5fe; border-radius: 10px; padding: 40px; } ul{ list-style: none; } </style>
子组件 list.vue
<template><div class="list"> <ul> <li v-for="(item,index) in list" :key="index" v-show="initShow" @click="changeTitle(item.title)">{{item.title}}</li> </ul> </div> </template> <script> import {mapState,mapMutations} from 'vuex' // 将vuex中的state数据和mutations中的方法映射到组件中 export default { //vue 生命周期(created)在实例创建之后,在数据初始化之前被调用 created(){ this.$store.dispatch('getListAction') //调用vuex 中的 getListAction异步方法 }, //计算state数据 computed:{ ...mapState({ list:'list', initShow:'isShow' }) }, methods:{ changeTitle(title){ this.$store.commit('changeTitleMutation',title) this.$store.commit('toggleShow',!this.initShow) } } } </script> // 触发异步里面的方法是用 this.$store.dispatch('这里是方法名') // 触发同步里面的方法是用 this.$store.commit('这里是方法名') <style> .list{ padding: 10px 0; text-align: center; } li{ line-height: 30px; height: 30px; border-radius: 15px; cursor: pointer; color:#535353; } li:hover{ background: #ff705b; color: #fff; } </style>
子组件 selectinput.vue
<template><div class="inputBox"> <input type="text" readonly :value="getTitle" @click="toggleShow" placeholder="你喜欢什么"> </div> </template> <script> export default { computed:{ // 获取vuex中的state数据并赋值绑定到 value上面 computed 里面的方法名其实就是相当于 data里面的数据,可以用this.getTitle 去访问 getTitle(){ return this.$store.state.title }, // 初始化控制下拉选项显示隐藏的状态,如果isShow是false 则不限是下拉菜单,默认是false initShow(){ return this.$store.state.isShow } }, methods:{ //点击input的时候调用该方法,这个方法去触发mutations下面的toggleShow,去改变isShow的状态,默认是isShow等于false, 然后在点击的时候去改变isShow 等于true , !this.initShow就是true,如果是true的话,下拉选项才能出来,并将改变过后的值传给toggleShow方法,去给vuex/store.js 里面的state.isShow赋值。 toggleShow(){ this.$store.commit('toggleShow',!this.initShow) } } } </script> <style> input{ outline: none; width: 100%; height: 40px; line-height: 40px; border-radius: 10px; border: 1px solid #d3d3d3; text-indent: 20px; color: #535353; } </style>
转载于:https://www.cnblogs.com/zhouyideboke/p/11193600.html
vue父组件异步获取动态数据传递给子组件获取不到值相关推荐
- vue父组件变量传递子组件_Vue2.x中的父组件数据传递至子组件
父组件结构 template :girls="aGirls"> script import vGirlGroup from './GirlGroup' export defa ...
- 系统总结vue组件间通信、数据传递(父子组件,同级组件)
总结一下对vue组件通信的理解和使用. 一.组件目录结构 父组件:app.vue 子组件:page1.vue 子组件:page2.vue 父组件 app.vue <template>< ...
- Vue2.x中的父组件数据传递至子组件
父组件结构 template <template><div><v-girl-group :girls="aGirls"></v-girl- ...
- react中父子组件数据传递,子组件之间的数据传递
首先有三个js文件,index.js(父组件) baseForm.js(子组件) etable.js(子组件) 在index.js中定义一个arr数组,传给BaseForm组件 import Reac ...
- 微信小程序怎么把获取的值传到引用组件内_微信小程序如何将接口获取的数据传递给自定义组件...
2019-07-11 回答 不知道你是什么意思.帮你改了下 class program { static int n = 4; int i, m; dsd[] a = new dsd[n]; publ ...
- vue 父组件获取接口值传到子组件_vue 项目中 “父组件” 异步获取数据之后,传递给子组件不显示...
有两个组件:一个为 transaction(父组件),一个为 transactionList (子组件): 上图为一个列表页,为父组件,在父组件里面的data中定义了数据列表, template中: ...
- vue.js组件之j间的通讯一 子组件接受父祖件数据
Vue2.0的三种常用传值方式.父传子.子传父.非父子组件传值 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件 ...
- html点击按钮获取列表数据传递到页面,随笔:ajax传递数组,layui父子页面传值,下来菜单赋值,父页面数据获取,表格数据替换为字符串...
一.Ajax向后台传递数组问题:(声明前台我使用的layui框架) 例:我们要多前台一个数据表格进行批量删除操作,我们通过复选框选中数据id,将id存入一个数组中,然后利用ajax传递给后台,完成批量 ...
- antd4.x版本解决父组件传递给子组件值的时候动态显示initialValue值的问题
antd4.x版本解决父组件传递给子组件值的时候动态显示initialValue值的问题 例如,我要从父组件给子组件传递一个字符串,然后子组件显示出来,按照3.x的版本的写法无法更新显示,这是因为in ...
最新文章
- 吴恩达机器学习笔记 —— 10 神经网络参数的反向传播算法
- Android实训案例(七)——四大组件之中的一个Service初步了解,实现通话录音功能,抽调接口...
- 汇编程序基本原理知识笔记
- ASP.NET自定义控件组件开发 第三章 为控件添加事件 前篇
- CY7C68013 USB接口相机开发记录 - 第一天:资料下载
- android viewholder静态,Android listview viewholder
- ubuntu下安装MP4Box
- Python百钱百鸡问题
- oracle条件索引查询,Oracle复合索引用于范围查询条件
- PLC程序的调试方法及步骤
- 聚合支付PC端-支付宝
- php eclipse xampp,PHP版eclipse配置xampp
- Mybatis中的类型转换器
- 使用Guardium和QRadar检测数据库漏洞
- 光耦隔离在单片机通信电路中的应用
- adams功能区不显示_基于ADAMS对初始角和相位角修改模拟力矩波动
- php主动推送弹幕_百万在线的美拍直播弹幕系统的实时推送技术实践之路
- 《安富莱嵌入式周报》第261期:2022.04.11--2022.04.17
- 经典查询练手第四篇(不懂装懂,永世饭桶!)
- h5案例欣赏及分析_【标签H5】你几岁了?
热门文章
- classes maven 为空 打包_Maven打包:将classes打成Jar,之后打到War中(或打成jar),过滤指定目录。...
- linux 没有权限登录,CentOS中让一个用户没有登录权限
- php 易语言md5加密解密,详解易语言调用js实现md5加密方法
- 考虑长度、大小写的字符串对比
- 数学--数论--容斥定理完全解析(转)
- 混合精度训练-Pytorch
- [kubernetes] kubectl proxy 让外部网络访问K8S service的ClusterIP
- STM32开发板入门教程(十三) - SPI模式读写SD卡
- 支持向量机概念图解_支持向量机:基本概念
- alexnet 结构_AlexNet的体系结构和实现