Is there a callback method like on-shown and on-show using vue.js?

I'm using v-show="my-condition" on a div element. But inside are some charts.js charts, which cannot render unless visible.

Anyone know how can render the chart.js only when the parent is made visible? They are inside selectable tabs so it fires potentially multiple times.

I'm using Vue.js and vue-strap.

Is there a callback method like on-shown and on-show using vue.js?

I'm using v-show="my-condition" on a div element. But inside are some charts.js charts, which cannot render unless visible.

Anyone know how can render the chart.js only when the parent is made visible? They are inside selectable tabs so it fires potentially multiple times.

I'm using Vue.js and vue-strap.

• javascript
• vue.js
• chart.js

• If your condition is a single variable you could .$watch it and use the callback to render the tables. See the docs – JCOC611 Commented Jan 2, 2016 at 2:13
• You could also use v-if instead of v-show and use a directive on the element you are making into a chart so you don't need to worry about watching. – Bill Criswell Commented Jan 2, 2016 at 17:48
• Its just suggestion, if you want to call any API and Store on state change then don't use computed, use a watch. becoz if you use computed then it will call so many times and it will hang a browser. – code solution Commented Jul 21, 2019 at 4:56

3 Answers 3

Check out this answer - using nextTick() worked for me in a similar situation. In a nutshell:

new Vue({
 ...

  data: {
    myCondition: false
  },

  watch: {
    myCondition: function () {
      if (this.myCondition) {
        this.$nextTick(function() {
          // show chart
        });
      } else {
        // hide chart
      }
    }
  },

  ...
})

There is no event that you describe.

However, you could use a computed property like this:

new Vue({
  ...

  data: {
    myCondition: false
  },

  computed: {
    showChart: function () {
      if (this.myCondition) {
        // show chart
      } else {
        // hide chart
      }

      return this.myCondition
    }
  },

  ...
})


<div v-show="showChart"></div>

https://jsfiddle.net/xhfo24qx/

custom-directive may archive this goals this goal

for example: https://stackoverflow.com/a/49737720/4896468

docs: https://v2.vuejs.org/v2/guide/custom-directive.html