• 机构投资者应合理审慎报价 2019-07-16
  • “2018上影之夜”姜文等为“谢晋经典电影回顾展”揭幕 2019-07-10
  • 交大钱学森学院举行毕业典礼 14毕业生赴世界排名前百大学读研 2019-07-10
  • 西安市:构建“五方联动”社会治理新格局 2019-06-23
  • IP定向--云南频道--人民网 2019-06-23
  • 育儿十大坎 新手妈妈快快get起来 2019-06-21
  • 吉林:让更多农村孩子参加少年宫活动 2019-06-21
  • 美国发起贸易战,我们要让世界知道美元、美债并不可靠 2019-06-05
  • 紫光阁中共中央国家机关工作委员会 2019-05-31
  • 监察体制改革后 湘西半年72名公职人员主动交代问题 2019-05-12
  • 媒体宣传报道重庆日报 王国平:扮靓重庆两江四岸” 让城市有机更新 2019-04-26
  • 我相信“交警雨中护送高考生”是真,“交警雨中护送高考生”反被该高考生家长投诉是假。 2019-04-16
  • 14名消防员日巡逻28公里 洗冷水澡 2019-04-10
  • 靶壕有了“蓝军”,百发百中的“神枪手”练起来 2019-04-10
  • 不是秀强大了,别人就会来做朋友,这逻辑不对 2019-04-01
  • 频道栏目
    神奇公式秒杀全国11选5 > 程序开发 > web前端 > HTML/CSS > 正文
    组件中watchprops根据v-if动态判断并挂载DOM的问题-前端和Node学习笔记-SegmentFault思否
    2019-05-11 22:05:10           
    收藏   我要投稿

    20190511004013.png

    山西新11选五任七遗漏:组件中 watch props 根据 v-if 动态判断并挂载 DOM 的问题

    ?? 更多前端技术和知识点,搜索订阅号 JS 菌 订阅

    神奇公式秒杀全国11选5 www.2zfa.com 问题复现:父组件中通过名为 source 的 prop 向子组件 Chart 传入数据

    <Chart :source="chartData"></Chart>
    import Chart from '../components/Chart'
    
    export default {
      name: 'Home',
      components: { Chart },
      data () {
        return {
          chartData: []
        }
      },
      mounted () {
        setTimeout(() => {
          this.chartData = [
            [89.3, 58212, 'Matcha Latte'],
            [57.1, 78254, 'Milk Tea'],
            [74.4, 41032, 'Cheese Cocoa'],
            [50.1, 12755, 'Cheese Brownie'],
            [89.7, 20145, 'Matcha Cocoa'],
            [68.1, 79146, 'Tea'],
            [19.6, 91852, 'Orange Juice'],
            [10.6, 101852, 'Lemon Juice'],
            [32.7, 20112, 'Walnut Brownie']
          ]
        }, 2000)
      }
    }

    子组件接收 source 数据当存在且至少有一条数据的时候,创建 id 为 main 的 p,用以初始化 echarts 实例

    <p v-if="source && source.length" id="main" ref="main"></p>
    <p vi-else>none</p>

    Chart 组件通过接收数据 watch prop 的变化动态的调用 echarts 的 setOptions 方法,最终渲染数据。

    export default {
      // ...
      watch: {
        source (newVal, oldVal) {
          this.setOpts()
        }
      },
      props: ['source'],
      methods: {
        setOpts () {
          let myChart = this.$echarts.init(this.$refs.main)
          myChart.setOption({
            dataset: {
              // ...
              source: this.source
            },
            // ...
          })
        }
      }
    }

    如果直接这么写必定报错:

    Error in callback for watcher "source": "TypeError: Cannot read property 'getAttribute' of undefined"

    在代码中增加一行代码:

    watch: {
        source (newVal, oldVal) {
          console.log(newVal, this.$refs.main) // [Array ...] undefined
          this.setOpts()
        }
      },

    启示 source 数据虽然有了,但 p 还并未挂载,因此 echarts 无法完成初始化

    那么想当然的我们就会去在 mounted 生命周期函数中调用 setOpts 方法:

    mounted () {
        console.log(this.source, this.$refs.main) // [] undefined
        this.setOpts()
      },

    这样也是错的,因为模板语法中使用了 v-if,那么当 source 并未满足条件的时候,p 当然也不会挂载。因此 p 仍然无法访问到。

    Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of undefined"

    解决办法是要么去掉 v-if 要么换另一种写法

    有时我们需要在没有数据的情况下增加一个占位标签用来展示一些额外的提醒信息,如“暂未获取到数据”等。那么去掉 v-if 肯定不行。

    既然如此我们保留 v-if 但写法有所改变:

    修改 Chart 组件:

    <template>
      <p>
        <p id="main" ref="main"></p>
      </p>
    </template>

    我们只需要一个 source 数据源,当 mounted 的时候调用 setOpts 方法,当 watch 数据变化的时候再次调用以更新数据

    export default {
      name: 'Chart',
      props: ['source'],
      mounted () {
        this.setOpts()
      },
      watch: {
        source () {
          this.setOpts()
        }
      },
      methods: {
        setOpts () {
          let myChart = this.$echarts.init(this.$refs.main)
          myChart.setOption({
            dataset: {
              dimensions: ['score', 'amount', 'product'],
              source: this.source
            },
            xAxis: { type: 'category' },
            yAxis: {},
            series: [
              {
                type: 'bar',
                encode: {
                  x: 'product',
                  y: 'amount'
                }
              }
            ]
          })
        }
      }
    }

    v-if 的判断我们把他移出去了我们判断 chartData 是否获取到,一旦获取到数据,马上加载 Chart 组件,这样就可以避开在组件内部调用 v-if 带来的问题:

    <template>
      <p>
        <Chart :source="chartData" v-if="flag"></Chart>
        <p v-else>none</p>
      </p>
    </template>
    import Chart from '../components/Chart'
    
    export default {
      name: 'Home',
      components: { Chart },
      data () {
        return {
          chartData: [],
          flag: false
        }
      },
      methods: {
        getData () {
          setTimeout(() => {
            this.chartData = [
              [89.3, 58212, 'Matcha Latte'],
              [57.1, 78254, 'Milk Tea'],
              [74.4, 41032, 'Cheese Cocoa'],
              [50.1, 12755, 'Cheese Brownie'],
              [89.7, 20145, 'Matcha Cocoa'],
              [68.1, 79146, 'Tea'],
              [19.6, 91852, 'Orange Juice'],
              [10.6, 101852, 'Lemon Juice'],
              [32.7, 20112, 'Walnut Brownie']
            ]
            this.flag = true
          }, 2000)
        }
      },
      mounted () {
        this.getData()
      }
    }

    另外还可将 Chart 组件和站位标签一同封装成一个 ChartWrapper。

    这样就不会因在组件内部调用 watch 监听 props 的变化动态 v-if 判断并挂载数据到 DOM 上出现的这种问题了。

    JS 菌公众账号

    请关注我的订阅号,不定期推送有关 JS 的技术文章,只谈技术不谈八卦 ??

    点击复制链接 与好友分享!回本站首页
    相关TAG标签
    上一篇:积梦前端的路由方案ruled-router-题叶-SegmentFault思否
    下一篇:10个有趣的javascript和css库(2019年最新)-CSS技术学习-SegmentFault思否
    相关文章
    图文推荐
    点击排行

    关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 神奇公式秒杀全国11选5

    版权所有: 神奇公式秒杀全国11选5--致力于做实用的IT技术学习网站

  • 机构投资者应合理审慎报价 2019-07-16
  • “2018上影之夜”姜文等为“谢晋经典电影回顾展”揭幕 2019-07-10
  • 交大钱学森学院举行毕业典礼 14毕业生赴世界排名前百大学读研 2019-07-10
  • 西安市:构建“五方联动”社会治理新格局 2019-06-23
  • IP定向--云南频道--人民网 2019-06-23
  • 育儿十大坎 新手妈妈快快get起来 2019-06-21
  • 吉林:让更多农村孩子参加少年宫活动 2019-06-21
  • 美国发起贸易战,我们要让世界知道美元、美债并不可靠 2019-06-05
  • 紫光阁中共中央国家机关工作委员会 2019-05-31
  • 监察体制改革后 湘西半年72名公职人员主动交代问题 2019-05-12
  • 媒体宣传报道重庆日报 王国平:扮靓重庆两江四岸” 让城市有机更新 2019-04-26
  • 我相信“交警雨中护送高考生”是真,“交警雨中护送高考生”反被该高考生家长投诉是假。 2019-04-16
  • 14名消防员日巡逻28公里 洗冷水澡 2019-04-10
  • 靶壕有了“蓝军”,百发百中的“神枪手”练起来 2019-04-10
  • 不是秀强大了,别人就会来做朋友,这逻辑不对 2019-04-01
  • 百灵百人牛牛经典版下载 007皇家赌场剧情 福彩东方6十1开奖结果查询 刘伯温四肖中特料 高频彩开奖号是怎么得来的 北京快三走势图主页 年终奖2元彩票 11选5杀号技巧 提供六肖中特免费资料 中国福利彩票走势图表 体彩顶呱刮中奖代码160 中国体育彩票海南环岛赛 福彩中心 意甲足球直播 两码中特网站