13

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.

Douglas Rosebank
  • 1,687
  • 2
  • 13
  • 11
  • If your condition is a single variable you could `.$watch` it and use the callback to render the tables. [See the docs](http://vuejs.org/api/#vm-watch) – JCOC611 Jan 02 '16 at 02: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 Jan 02 '16 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 Jul 21 '19 at 04:56

3 Answers3

7

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

  ...
})
htompkins
  • 411
  • 4
  • 6
4

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/

Pantelis Peslis
  • 14,930
  • 5
  • 44
  • 45
0

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

tony19
  • 125,647
  • 18
  • 229
  • 307
yurenchen
  • 1,897
  • 19
  • 17