当前位置: 首页 > news >正文

vue中未能及时获取到props?

一、描述

        我首先描述一下我遇到的问题的经过,我有一个页面,页面里面有一个组件,而组件里面还有一个组件,在最后一层的组件中,当我尝试从上一层拿传过来的props之后,在mouted中进行使用该值的某一属性进行接口调用时,发现,在mouted中,页面初始化之后,未能及时更新最新的值,导致,在接口传值的过程中,传入了一个空对象,接口获取不到。简单来说,就props中的数据未能及时的得到传递。

二、采用watch监听

        通过watch监听的方式,在组件中,监听传过来的props,他的newValue就是传递过来的值,他触发的时机是当数据发生改变时就触发里面的逻辑,所以我们在监听获取到新值之后在调用接口,以下是我的测试示例:

props: {"Item": {type: Object,require: true},"role": {type: String,require: true,default: "lawyer"}},
watch: {Item(newValue, oldValue) {console.log("item",newValue);if (newValue.photo && newValue.photo.attachmentCode && newValue.photo.attachmentId) {console.log("1122");this.getAvatar(newValue.photo.attachmentCode, newValue.photo.attachmentId)}if(newValue.star) {this.getstarcount(newValue.star)}},immediate: true  // 第一次改变就执行},

但为了保险一点,我也在mouted上加一下:

mounted() {console.log("item",this.Item);if (this.Item.photo && this.Item.photo.attachmentCode && this.Item.photo.attachmentId) {console.log("1122");this.getAvatar(this.Item.photo.attachmentCode, this.Item.photo.attachmentId)}if(this.Item.star) {this.getstarcount(this.Item.star)}},

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • docker入门之cgroups
  • Linux的chmod指令
  • 电测量数据交换DLMS∕COSEM组件第62部分:COSEM接口类(2)
  • 14.3 Matplotlib与Seaborn数据可视化
  • 基于web网上村委会业务办理系统pf
  • Linux中的锁
  • 预计下半年业务将反弹回升,亚信科技的底气源自哪里?
  • MySQL——单表查询(二)按条件查询(4)空值查询
  • 《深入浅出多模态》(八)多模态经典模型:MiniGPT4
  • qt-16可扩展对话框--隐藏和展现
  • 【硬件模块】震动传感器模块
  • Python做统计图之美
  • 注意!美国跨境选品风向变动,低价产品反成抢手货!
  • vos3000怎样对接voip落地语音网关呢?卡机和O口网关的配置技巧有哪些?
  • 牛客JS题(四十五)数组去重
  • exports和module.exports
  • mysql 5.6 原生Online DDL解析
  • MySQL主从复制读写分离及奇怪的问题
  • OpenStack安装流程(juno版)- 添加网络服务(neutron)- controller节点
  • ReactNativeweexDeviceOne对比
  • vue和cordova项目整合打包,并实现vue调用android的相机的demo
  • 关于Flux,Vuex,Redux的思考
  • 快速体验 Sentinel 集群限流功能,只需简单几步
  • 码农张的Bug人生 - 初来乍到
  • 前嗅ForeSpider中数据浏览界面介绍
  • 腾讯优测优分享 | 你是否体验过Android手机插入耳机后仍外放的尴尬?
  • 移动端唤起键盘时取消position:fixed定位
  • 【云吞铺子】性能抖动剖析(二)
  • 交换综合实验一
  • 正则表达式-基础知识Review
  • 直播平台建设千万不要忘记流媒体服务器的存在 ...
  • #前后端分离# 头条发布系统
  • #职场发展#其他
  • $(document).ready(function(){}), $().ready(function(){})和$(function(){})三者区别
  • (2024.6.23)最新版MAVEN的安装和配置教程(超详细)
  • (35)远程识别(又称无人机识别)(二)
  • (android 地图实战开发)3 在地图上显示当前位置和自定义银行位置
  • (cos^2 X)的定积分,求积分 ∫sin^2(x) dx
  • (poj1.2.1)1970(筛选法模拟)
  • (vue)el-tabs选中最后一项后更新数据后无法展开
  • (附源码)springboot太原学院贫困生申请管理系统 毕业设计 101517
  • (过滤器)Filter和(监听器)listener
  • (六)Flink 窗口计算
  • (三)Pytorch快速搭建卷积神经网络模型实现手写数字识别(代码+详细注解)
  • (十六)一篇文章学会Java的常用API
  • (十七)devops持续集成开发——使用jenkins流水线pipeline方式发布一个微服务项目
  • (译)2019年前端性能优化清单 — 下篇
  • (原創) 是否该学PetShop将Model和BLL分开? (.NET) (N-Tier) (PetShop) (OO)
  • (中等) HDU 4370 0 or 1,建模+Dijkstra。
  • (转)Google的Objective-C编码规范
  • (转)visual stdio 书签功能介绍
  • (最新)华为 2024 届秋招-硬件技术工程师-单板硬件开发—机试题—(共12套)(每套四十题)
  • .NET 5种线程安全集合
  • .NET Framework 3.5安装教程
  • .NET MAUI Sqlite数据库操作(二)异步初始化方法