如何在 Nuxt Vue JS 中运行图表更改函数？

Question

我想在 Vue Nuxt JS 中加载/更改图表时运行一个函数。我尝试过使用created、mounted、updated、beforeMount，但它们都没有用。请帮忙？

编辑1： 下面是代码：

    updated(){
        this.adjustFontSize()
        this.removePMFromXAxis()
    },
    beforeMount() {
        this.removePMFromXAxis()
    },
    created(){
        this.removePMFromXAxis()
    },
    mounted(){
        this.removePMFromXAxis()

//function
   removePMFromXAxis(){
            // eslint-disable-next-line prefer-const
            let ticks = document.querySelectorAll(".d3-grouped-area .axis--x .tick");

            ticks.forEach(function(tick) {
                // eslint-disable-next-line prefer-const
                let textContent = tick.querySelector('text').textContent;
                console.log("textcontent", textContent)
                // eslint-disable-next-line prefer-const
                let updatedTextContent = textContent.replace(/\s[APMapm]{2}\s*$/, '');

                tick.querySelector('text').textContent = updatedTextContent;
            });

        },

Answer 1

要在数据更改后更新调用函数，我们可以使用Watchers

正如您提到的，

数据

中有dataMonthlyCost，我们可以使用诸如

之类的观察者

watch: {
//Whenever dataMonthlyCost changes, this function will run
  dataMonthlyCost(newValue, oldValue) {
    this.removePMFromXAxis()
   }
}