VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • 解决vue组件props传值对象获取不到的问题

    先说问题,父组件利用props向子组件传值,浏览器 console 有这个值,但是获取不到内部的属性,困了我3个小时,真的**

    personal
    console

    以下为原代码

    1、home.vue(父组件)--personal是被传的参数

    <!--子组件-->
    <form-picker class="form-picker"
     :personal="personal"
    >
    </form-picker>
    export default {
      data(){
        return{
          personal:{
            state:'',////判断是修改状态,还是新增状态 add/edit
            data:[]
          }
        }
      },
      mounted(){
       this.$api.personal.searchPersonalInfo(this.userInfo.userId).then((res)=>{
         this.personal.data = res.data.data //这里给personal对象赋值接口传来的数据
        })
      },
    }

    2、formPicker (子组件) --接收personal

    export default {
      props:['active','personal'],
      mounted(){
        console.log(149,this.personal)
        console.log(150,this.personal.state)
      }
    }

    运行结果

    明明149行有 state 值,150行输出却没有了,是不是超级奇怪

    后面经过大佬的讲解,其实浏览器console.log也是应该没有的

    所以,其实我们子组件一开始根本就没有取到这个personal这个对象。

    3、解决方法--使用watch

    父组件

    export default {
      data(){
        return{
          personal:{
            state:'',////判断是修改状态,还是新增状态 add/edit
            data:[]
          }
        }
      },
      mounted(){
       this.$api.personal.searchPersonalInfo(this.userInfo.userId).then((res)=>{
         //this.personal.data = res.data.data //这里给personal对象赋值接口传来的数据
         //使用以下方法重新赋值,上面方法watch监听不到,具体什么原因,我也不清楚,知道的告知我!谢谢
         this.personal = {
          data: res.data.data,
          state: 'edit'
         }
        })
      },
    }

    接下来子组件就能 watch 到 personal 了 子组件

    watch:{
       personal(newValue,oldValue){
        console.log(181,newValue) 
       },
    /** 输出
        {
          data: res.data.data,
          state: 'edit'
         }
    **/
      }

    总结

    以上所述是小编给大家介绍的解决vue组件props传值对象获取不到的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持!
    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    您可能感兴趣的文章:

    • vue2.0 子组件改变props值,并向父组件传值的方法
    • vue中如何让子组件修改父组件数据
    • Vue 父子组件的数据传递、修改和更新方法
    • vue父组件触发事件改变子组件的值的方法实例详解
    • vue父组件向子组件(props)传递数据的方法
    • 解决vue 子组件修改父组件传来的props值报错问题

    广而告之:
    热门推荐:
    php连接微软MSSQL(sql server)完全攻略

    在研究ezSQL的时候就看到了mssql_connect()等一些php提供的连接MSSQL的函数,本以为php这个开源的风靡世界的编程语言对连接微软的数据应该是不在话下的,但是到真正执行的时候,才发现困难多多。 一开始我下载的php版本是5.93的,下载下来添加环境变量等等搞了半天后,phpinfo···

    Javascript获取某个月的天数

    Javascript里面的new  Date("xxxx/xx/xx")这个日期的构造方法有一个妙处,当你传入的是"xxxx/xx/0"(0号)的话,得到的日期是"xx"月的前一个 月的最后一天("xx"月的最大取值是69,题外话),如果传入"1999/13/0",会得到"1998/12/31"。而且最大的好处是当你传 入"xxxx/3/···

    javascript实现动态显示颜色块的报表效果

    利用html的颜色块动态展示数据 <style type="text/css"> *{ padding: 0; margin: 0; } .tubiao,.jihua,.shiji,.riqi{ width: 100%; overflow: hidden; margin-top: 10px; } .left{ width: 10%; float: left; text-align: center; height: 25px; line-hei···

    JavaScript箭头函数

    ES6标准新增了一种新的函数:Arrow Function(箭头函数)。 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 在继续学习箭头函数之前,请测试你的浏览器是否支持ES6的Arrow Function ···

    PHP之autoload运行机制实例分析

    本文较为深入的分析了PHP的autoload运行机制。对于深入理解PHP运行原理有一定的帮助作用。具体分析如下: php实现autoload有两种方法: 1、拦截器__autoload() 2、设置全局变量函数指针autoload_func为指定函数。通常在c扩展中使用 本质上前者还是通过后者实现的。 分析过程,P···

    php 图片上添加透明度渐变的效果

    复制代码 代码如下:<?php ////$strimgsrc = file_get_contents("http://127.0.0.1/5307754.jpg"); ////$imgsrc = imagecreatefromstring($strimgsrc); $imgsrc = imagecreatefromjpeg("5307754.jpg"); $imgsrcw = imagesx($imgsrc); $imgsrch = imagesy($imgsrc); $wi···

    10个对初学者非常有用的PHP技巧

    本文介绍一些关于改善和优化PHP代码的提示和技巧,供大家参考,具体内容如下 1.不要使用相对路径,要定义一个根路径 这样的代码行很常见: require_once('../../lib/some_class.php'); 这种方法有很多缺点: 1)、它首先搜索php包括路径中的指定目录,然后查看当前目录。因此···

    改变layer confirm弹窗按钮的颜色方法

    原来的颜色: 改造后的颜色: js: layer.confirm("您选的时间是:xxxx", { title : "预约时间确认", skin : "my-skin", btn : [ '确定', '取消' ]//按钮 }, function(index) { layer.close(index); //自定义代码 }); css: .my-skin .layui-layer-b···

    layui中layer前端组件实现图片显示功能的方法分析

    本文实例讲述了layer前端组件实现图片显示功能的方法。分享给大家供大家参考,具体如下: 实现图片显示功能:layer 1.在这里介绍一种layer前端组件 layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案, 致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友···

    Node.js使用MongoDB的ObjectId作为查询条件的方法

    当往MongoDB中插入一条数据时,会自动生成ObjectId作为数据的主键。 那么如何通过ObjectId来做数据的唯一查询呢? 在MongoDB中插入一条数据 在MongoDB中插入一条如下结构的数据: { _id: 5d6a32389c825e24106624e4, title: 'GitHub 上有什么好玩的项目', content: '上个月···