交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 解决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值报错问题

    广而告之:
    热门推荐:
    div实现自适应高度的textarea实现angular双向绑定

    相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个。 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row。 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就错了。 textarea不是不可以的,然后我是这样错的。(就是监听scroll 如果出现了···

    用js格式化金额可设置保留的小数位数

    复制代码 代码如下: //金额的格式化s为要格式化的参数(浮点型),n为小数点后保留的位数 function formatMoney(s,n){ n = n>0 && n<=20 ? n : 2; s = parseFloat((s+"").replace(/[^\d\.-]/g,"")).toFixed(n)+""; var l = s.split(".")[0].split("").reve···

    UNIX/LINUX SHELL 正则表达式语法详解附使用方法

    几乎所有重要问题都需要从无用数据中过滤出有用数据。了解大量的 UNIX? 命令行实用工具如何使用正则表达式 来去芜取精。 非常奇怪,直到今天我仍然能重复周六早上的经典歌曲“Conjunction Junction”。这是好事(看了太多电视)还是坏事(也许是我现在职业的先兆)仍然有待···

    Knockout自定义绑定创建方法

    概述 除了上一篇列出的KO内置的绑定类型(如value、text等),你也可以创建自定义绑定。 注册你的binding handler ko.bindingHandlers.yourBindingName = { init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { // This will be call···

    SQL Server的FileStream和FileTable深入剖析

    互联网时代数据是爆炸式增长,我们常常需要把结构化数据和非结构化数据(如文档,演示文稿,视频,音频,图像)存储在一起。通常有几种方案: 1。在数据库中存储结构化数据,在文件系统中存储非结构化数据,然后数据库里有一个字段记录文件系统的路径,虽然这种方法成本合算···

    详解JDBC数据库链接及相关方法的封装

    详解JDBC数据库链接及相关方法的封装  使用的是MySQL数据库,首先导入驱动类,然后根据数据库URL和用户名密码获得数据的链接。由于使用的是MySQL数据库,它的URL一般为,jdbc:mysql://主机地址:端口号/库名。   下面是封装的具体类,用到了泛型和反射,不过还存在些问题···

    PHP实现本地图片上传和验证功能

    今天研究了一下PHP的FILES函数,使用PHP实现本地图片的上传,验证文件是否为图片,并将图片保存在指定目录下,实现游览图片的功能,感觉还是很好玩的,一共有两个PHP页面,一个作为前台的上传和图片展示,另一个用来处理保存图片,代码里做了很详细的注释,并将FILES函数的语法···

    PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)

    本文实例总结了PHP字符串处理技巧。分享给大家供大家参考,具体如下: Demo1.php <?php //源代码是文本形式,页面显示是 web 形式 $str = ' PHP '; //清理一下两边的空格 ltrim 只清理左,rtrim只清理右边 echo ltrim($str); echo '<br/>';···

    jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】

    本文实例讲述了jQuery实现点击自身以外区域关闭弹出层功能。分享给大家供大家参考,具体如下: 原理参考前面一篇《JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能》,小编顺便对原文区域外点击bug进行了修改,具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT···

    javascript中的parseInt和parseFloat区别

    先看代码:复制代码 代码如下:<script> alert(parseInt("3.54 apples")); alert(parseFloat("3.54 apples")); </script> <script>alert(parseInt("3.54 apples"));alert(parseFloat("3.54 apples"));</script>运行结果: parseInt()和parseFloat···