Data update or event trigger in Vue, but the view is not updated

Time:2022-3-18

Problem source

In the development process, it is necessary to fix the tooltip of echarts trend chart,

The implementation scheme is to set the always showcontent of the tooltip to true and the trigger on to none when clicking item, so that the tooltip will not be triggered,

After clicking the external area of the chart, set alwaysshow content to false and trigger on to ‘mousemove|click’, and then call the hidetip of the dispatchaction provided by echarts.

Problems arising

Failed to close the tooltip. Click the external area twice before closing the tooltip

Problem solving

Add $nextTick to the dispatchAction event to make it call after the end of the current DOM loop.

    handleClickOutside() {
      const tooltip = {
        ...this.trendOptions.tooltip,
        alwaysShowContent: false,
        triggerOn: 'mousemove|click',
      };
      this.trendOptions = {
        ...this.trendOptions,
        tooltip,
      };
      this.$nextTick(() => {
        this.$refs.trendChart.dispatchAction({
          type: 'hideTip',
        });
      });
    },
    handleMarkPointClick(params) {
      if (params.componentType === 'markPoint') {
        const tooltip = {
          ...this.trendOptions.tooltip,
          alwaysShowContent: true,
          triggerOn: 'none',
        };
        this.trendOptions = {
          ...this.trendOptions,
          tooltip,
        };
      }
    },

extend

In Vue development, if the data is updated but the attempt is not updated, the high probability is caused by the event loop mechanism of JavaScript.

Recommended Today

Cann 5.0 hard core technology first look

Summary:In December 2021, cann5.0 will also be officially introduced to you. Through software and hardware co optimization, this version will double the training performance and show the “Chinese speed” in the field of AI with its strength! This article is shared from Huawei cloud community “cann 5.0 hard core technology first look”, author: kourei. introduction […]