vue父组件异步获取动态数据传递给子组件获取不到值

原理:

       在父组件中使用axios获取异步数据传给子组件,但是发现子组件在渲染的时候并没有数据,在created里面打印也是空的,结果发现一开始子组件绑定的数据是空的,在请求数据没有返回数据时,子组件就已经加载了,并且他绑定的值也是空的

使用vuex全局状态管理,其实简单,利用vuex的辅助函数(mapState,mapMutations)mapState是将state里面的数据映射到计算中(computed),mapMutations也是类似,把vuex中mutations的方法映射到组件里面,就可以在组件里面直接使用方法了,在vuex中使用异步(actions)去掉用接口,然后在接口成功的函数里面取触发同步(mutations)里面的方法,把得到数据传给mutations里面的方法里并且给state里面的属性赋值,然后就可以在子组件中使用computed计算中去获取数据并且渲染到页面上
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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247473.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MAC 下配置JavaEE开发环境

1、安装jdk&#xff0c;官网下载 路径&#xff1a;http://www.oracle.com/technetwork/java/javase/downloads/index.html 选择合适的版本下载即可。 2、配置Java环境变量 &#xff08;1&#xff09;commandspace 输入termimal 打开终端 &#xff08;2&#xff09;在终端中输…

微服务深入浅出(7)-- 网关路由Zuul

Zuul用于构建边界服务&#xff0c;致力于动态路由&#xff0c;过滤&#xff0c;监控&#xff0c;弹性伸缩和安全等方向。 1、ZuulRibbonEureka结合&#xff0c;可以实现智能路由和负载均衡 2、网关将所有服务的API接口统一聚合统一暴露 3、网关统一爆率接口后&#xff0c;可以做…

判断JavaScript对象为null或者属性为空

首先说下null与undefined区别&#xff1a; 对已声明但未初始化的和未声明的变量执行typeof&#xff0c;都返回"undefined"。 null表示一个空对象指针&#xff0c;typeof操作会返回"object"。 一般不显式的把变量的值设置为undefined&#xff0c;但null相…

font face如何导入自定义字体

首先&#xff0c;浏览器支持什么字体取决于用户系统里安装了什么字体&#xff0c;比如CSS中这么写&#xff1a; font-family:"微软雅黑","黑体","宋体"; 那么浏览器会尝试按照从左到右的顺序依次应用&#xff0c;假设用户电脑上没有安装微软雅黑…

Python中_,__,__xx__方法区别

_xx 单下划线开头 Python中没有真正的私有属性或方法,可以在你想声明为私有的方法和属性前加上单下划线,以提示该属性和方法不应在外部调用.如果真的调用了也不会出错,但不符合规范. 方法就是以单下划线开头命名定义了&#xff0c;这种定义不会被*导入&#xff08;from module …

利用@media screen实现网页布局的自适应

利用media screen实现网页布局的自适应 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在CSS中添加media screen属性,根据浏览器宽度判断并输出不同的长宽值 1280分辨率以上&#xff08;大于1200px&#xff09; media screen and (min-width:1200px){#p…

C# webkit内核 网页填表

比如我要操作的是下面的input 用到的方法是 调用如下&#xff1a; webkit.StringByEvaluatingJavaScriptFromString("document.getElementsByClassName(login_i_con_li_ipt name)[0].valueThis is a Demo."); 类似这种div在webkit中好像是无法通过常规方法模拟的 这时…

p字间距 html段落内文字设置字间距间隔

只对段落p内文字设置字间距&#xff0c;段落<p>是html段落标签&#xff0c;以<p>开始&#xff0c;以</p>结束&#xff0c;通常文章分段使用p标签&#xff0c;而有时小局部布局也可以使用p来布局。通过css设置其样式实现排版目的。 这里针对p设置字间距&…

基本数据类型

上节回顾 1.循环打印数列1&#xff0c;3&#xff0c;5&#xff0c;.........&#xff0c;99 for i in range(100):if i%21:print (i) 2.turtle 库 # penup 抬笔 # pendown 落笔 # pensize 画笔大小 # pencolor 画笔颜色## 画笔运动函数 # fd 前进 # bk 后退 # goto 到达指定的坐…

修改系统默认 alert 弹框样式

修改默认 alert 弹框&#xff0c;思路很简单&#xff0c;定义一个 alert(e) 函数&#xff0c;加载最开头即可。 css部分&#xff1a; <style>#msg{width:266px;position: fixed;z-index:999;top: 49%;margin-top:-80px;left:50%;margin-left:-133px;background:#fff;bo…

Code Review的重要性

这几天一直在搞一家客户的产品升级动作&#xff0c;数据的转移已经完成大部分&#xff0c;因为升级主要的目标是处理性能问题&#xff0c;所以我针对性的对将要升级的版本进行了一些操作性能检查&#xff0c;真是不做不知道&#xff0c;一做吓一跳&#xff0c;有一个查询选择人…

Myeclipse快捷键总结大全

Myeclipse快捷键 Ctrl1 快速修复 CtrlD: 删除当前行 CtrlQ 定位到最后编辑的地方 CtrlL 定位在某行 CtrlO 快速显示 OutLine CtrlT 快速显示当前类的继承结构 CtrlW 关闭当前Editer CtrlK 快速定位到下一个 CtrlE 快速显示当前Editer的下拉列表 CtrlJ 正向增量查找(按…

秋蝉鸣泣之时

奇怪的题目背景 所误入的 是回忆的教室 所响起的 是通向绝望的计时器 所到达的 是开始的结束 你 能相信吗? 题目背景 最近礼奈酱学会了线段树和树状数组两种数据结构 由于礼奈酱上课听的很认真&#xff0c;所以她知道 树状数组常见的操作是 单点加区间求和 线段树常见的操作是…

对浅拷贝与深拷贝的研究

浅拷贝只复制指向某个对象的指针&#xff0c;而不复制对象本身&#xff0c;新旧对象还是共享同一块内存。 浅拷贝的实现方式 Object.assign()&#xff1a;需注意的是目标对象只有一层的时候&#xff0c;是深拷贝Array.prototype.concat()Array.prototype.slice()深拷贝就是在拷…

:nth-child(n)与:nth-of-type(n)为啥显示不对呢

首先是二者的区别 :nth-child(n) 是选择父元素的第n个子元素。 :nth-of-type(n) 是选择父元素的第n个同类型的子元素 举个例子&#xff1a; <div class"read"><h1>title</h1><p>paragraph1</p><p>paragraph2</p> <!…

css3 box-shadow阴影(内外阴影与发光)讲解

基础说明&#xff1a; 外阴影&#xff1a;box-shadow: X轴 Y轴 Rpx color; 属性说明&#xff08;顺序依次对应&#xff09;&#xff1a; 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值&#xff08;大小&#xff09; 阴影的颜色 内阴影&#xff1a;b…

Apress Pro Android 2

Apress Pro Android 2转载于:https://www.cnblogs.com/gavinhughhu/archive/2010/03/21/1690792.html

Query意图分析:记一次完整的机器学习过程(scikit learn library学习笔记)

所谓学习问题&#xff0c;是指观察由n个样本组成的集合&#xff0c;并根据这些数据来预测未知数据的性质。 学习任务&#xff08;一个二分类问题&#xff09;&#xff1a; 区分一个普通的互联网检索Query是否具有某个垂直领域的意图。假设现在有一个O2O领域的垂直搜索引擎&…

使用 vue-cli 开发多页应用

修改的webpack配置文件 全局配置 修改 webpack.base.conf.js 打开 ~\build\webpack.base.conf.js &#xff0c;找到entry&#xff0c;添加多入口 entry: {app: ./src/main.js,app2: ./src/main2.js,app3: ./src/main3.js, }, 运行、编译的时候每一个入口都会对应一个Chunk …

深度学习系统相比较传统的机器学习系统,针对常见的分类问题,精度究竟能有多大提升?...

来源&#xff1a;知乎原文链接&#xff1a;深度学习系统相比较传统的机器学习系统&#xff0c;针对常见的分类问题&#xff0c;精度究竟能有多大提升&#xff1f; 问题&#xff1a; 我现在手头有一个binary classification的问题。数据量在一百万左右。每个sample都是一个14个f…