In vuejs, the component of highchats is encapsulated, and the child component cannot listen for changes to the incoming object of the parent component.

the main problem is that the title is the same.

< hr >

this is my highchats wrapper, and the test attribute is what I use to test and listen.

<template>
  <div :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
import Highcharts from "highcharts/highstock";
import HighchartsMore from "highcharts/highcharts-more";
import HighchartsDrilldown from "highcharts/modules/drilldown";
import Highcharts3D from "highcharts/highcharts-3d";
import { debounce } from "@/utils";

HighchartsMore(Highcharts);
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);

export default {
  props: {
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "350px"
    },
    test: {
      type: String,
      default: ""
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object
    }
  },
   name: "highcharts",
  data() {
    return {
      chart: null,
      options: Object
    };
  },
  mounted() {
    this.initChart();
    if (this.autoResize) {
      this.__resizeHanlder = debounce(() => {
        if (this.chart) {
          this.chart.reflow();
        }
      }, 100);
      window.addEventListener("resize", this.__resizeHanlder);
    }

    // 
    const sidebarElm = document.getElementsByClassName("sidebar-container")[0];
    sidebarElm.addEventListener("transitionend", this.__resizeHanlder);
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    if (this.autoResize) {
      window.removeEventListener("resize", this.__resizeHanlder);
    }

    const sidebarElm = document.getElementsByClassName("sidebar-container")[0];
    sidebarElm.removeEventListener("transitionend", this.__resizeHanlder);

    this.chart.destroy();
    this.chart = null;
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
        console.log(val)
      }
    },
    test:{
      handler(val){
        console.log(val)
      }
    }
  },
  methods: {
    setOptions(expectedData) {
      this.options = expectedData
    },

    initChart() {
      this.setOptions(this.chartData);
      this.chart = new Highcharts.Chart(this.$el, this.options);
    }
  }
};
</script>

the following is the page call

    <Highchats :chart-data="temp_data.Highchats_linedata"></Highchats>

I define the entire configuration object of highchats in the data of the parent component. When the page is loaded for the first time, it will render normally.
but when I change the data of this configuration object through the method, the monitor in highchats cannot hear it. Please give me some advice.

I read a lot of answers on the Internet, all of which are to create a chart, get an instance of the chart, and then update the chart by calling the function of highchats.
but I don"t see that in the component, it is not feasible to let highchats update itself through monitoring.

Feb.27,2021

  • has encountered a similar problem before. The parent component is passed to the child component and can be rendered, but the value passed by the parent component cannot be obtained in the hook, so it cannot be dynamically updated.
  • later used ide/components.html-sharp%E9%AB%98%E7%BA%A7%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6" rel=" nofollow noreferrer "> Asynchronous component

1. At this time, you can get the value passed by the parent component props in the hook of the child component. The page needs dynamically updated parameters, and computed dynamically calculates (watch is not recommended)
2.watch snooping is also OK. I solved this at first, but later I thought 1 was better. But ide/list.html-sharp%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B" rel=" nofollow noreferrer "> watch cannot listen for a worthwhile change in the array . You need to use

in conjunction with js's splic,push and other operations to change the array.

the above is a personal solution to this

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b2c596-2baef.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b2c596-2baef.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?