vue.js中v-show的回调

Question

有没有像on-shown和on-show这样的使用vue.js的回调方法？

我在div元素上使用v-show="my-condition“。但是里面有一些charts.js图表，这些图表只有在可见时才能呈现。

有人知道只有当父级可见时才能呈现chart.js吗？它们位于可选选项卡中，因此可能会多次触发。

我使用的是Vue.js和vue-strap。

Answer 1

查看this answer --在类似的情况下，使用nextTick()对我也是有效的。简而言之：

new Vue({
 ...

  data: {
    myCondition: false
  },

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

  ...
})

Answer 2

没有您所描述的event。

但是，您可以像这样使用computed属性：

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/

Answer 3

custom-directive可能会将此目标存档为此目标

例如：https://stackoverflow.com/a/49737720/4896468

文档：https://vuejs.org/v2/guide/custom-directive.html