Callback for v-show in vue.js

Question

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.

Answer 1

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
      }
    }
  },

  ...
})

Answer 2

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/