What is the best way to trigger a function when a chart changes in Nuxt using Vue JS?

How can I trigger a function whenever a chart is loaded or changed in Vue Nuxt JS? I've tried using created, mounted, updated, and beforeMount but none of them seem to work. Can anyone offer any guidance?

Edit 1: Here's the code snippet:

    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;
            });

        },
vue.jsnuxt.js

Answer №1

If you want to update the function when data changes, you can utilize Watchers

Since you mentioned having dataMonthlyCost in data, watchers can be used like this:

watch: {
//Function runs when dataMonthlyCost is altered
  dataMonthlyCost(newValue, oldValue) {
    this.removePMFromXAxis()
   }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The CSS styling of Vuetify TreeView does not support text wrapping

I'm having trouble getting the long text in this CodePen snippet to break and wrap properly. It extends off screen, rendering the append button unclickable. I've experimented with various CSS rules but haven't found a solution yet. Check ou ...

cssvue.jsvuetify.js

Stop horizontal overflow of content

This unique Vuetify demo on CodePen showcases a two-column layout. The first column contains a <v-list> enclosed in a green <v-alert>. By clicking the "toggle text" button, you can switch the title of the first list item between short and long ...

cssvue.jsvuetify.js

What could be preventing the background image from displaying properly?

I had the idea to create a game where players have to flip cards to reveal what's on the back, but I'm struggling to get the background image to display properly. As a newcomer to Vue, I'm not sure if I made a mistake somewhere. My intuition ...

javascripthtmlcssvue.js

Align a button to the left or right based on its position within the layout

On the left side, there is dynamic text and on the right side, a button is displayed as shown below: <div class="dynamic-text"> {{ dynamicText }} </div> <div class="some-button"> < ...

htmlcssvue.js

Challenges with the height of the calendar component in Vuetify

I need assistance with preventing the appearance of two scroll bars while working with Vuetify's sheet and calendar components. https://i.stack.imgur.com/yBfhj.png Below is my code snippet: <template> <v-app> <v-main> & ...

cssvue.jsvuetify.jsheight

Choose the option for overseeing safaris

Hello there! I need some help with Safari. Can you please guide me on how to disable the arrows? https://i.stack.imgur.com/1gzat.png ...

javascriptcssvue.js

Methods for concealing the title and date when printing web content using JavaScript

When utilizing the window.print method to print out a specific screen, I encountered an issue. I need to hide the date in the top left corner of the image as well as the title (not the big heading) which has been intentionally blurred. I've come acro ...

javascriptcssvue.js

I'm encountering an issue where Bulma is taking precedence over the CSS of my Vue3

In my Vue CLI 3 project, I'm utilizing Bulma and have included the import in the 'index.js' file like so: import { createApp } from 'vue' import App from './App.vue' import router from './router' require('@ ...

cssvue.jsvuejs3bulmavue-cli-3

Expanding the input focus to include the icon, allowing it to be clicked

Having trouble with my date picker component (v-date-picker) where I can't seem to get the icon, a Font Awesome Icon separate from the date-picker, to open the calendar on focus when clicked. I've attempted some solutions mentioned in this resour ...

csshtmlvue.jssass

In Vue, when you want to display text after reaching a height of 50px, any additional text will automatically be replaced by five full

https://i.stack.imgur.com/mp0YJ.png >>>>>>>>>Explore Sandbox Example <div style="height:50px"> ...

htmlcssvue.js

How can we stop Vuetify from overwriting Bootstrap3's classes when using treeshaking?

I am currently in the process of transitioning an app from jQuery/Bootstrap3 to Vue/Vuetify. My approach is to tackle one small task at a time, such as converting the Navbar into its own Vue component and then gradually updating other widgets. Since the n ...

cssvue.jstwitter-bootstrap-3vuetify.js

Can the `lang` attribute be used in a `style` tag to specify the CSS preprocessor language for VueJS? Are there any disadvantages to using this method?

Occasionally, I notice people incorporating code like this: <style lang="scss"> ... </style> <style lang="stylus"> ... </style> I checked the documentation for the style tag and found that lang is not a valid a ...

javascriptcssvue.jssassstylus

Animate elements in Vue.js when navigating between pages is a great way to enhance user

I'm looking to add animation to a specific element once the route page finishes loading. This is not related to route page transitions. I've experimented with various methods, trying to animate a progress bar based on dynamic data values. I attem ...

javascriptcssvue.jsfrontendvuejs2

What is the correct way to integrate a HTML/CSS/JS theme into a Vue project effectively?

As a newcomer, I recently acquired a bootstrap theme that comes with HTML, CSS, and JavaScript files. My goal now is to integrate this theme into Vue in order to make it fully functional. The challenge I am facing is how to successfully incorporate the the ...

javascripthtmlcssvue.js

Arranging text in alignment on a single line with Vuetify

I am attempting to format text in a way that it is aligned with part on the left side of the card and the other part on the right (with space between them). However, when using class="text-right", the text gets moved down. Does anyone have any ideas on h ...

cssvue.jsvuetify.js

How can I align two div buttons at the top and bottom to appear on the left and right sides?

How can I change the position of two buttons from top and bottom to left and right as shown in the second image? I am utilizing Floating Vue, so the buttons will be contained within a div. Is it feasible to adjust their position accordingly? Check out th ...

htmlcssvue.js

Having trouble with Vue.js implementation of Bootstrap tab navigation?

I am currently working on a vue.js application that consists of 2 routed components. I recently attempted to integrate a bootstrap tab navigation into the first component, but unfortunately, the tab contents are not being properly displayed. <templat ...

javascripthtmlcsstwitter-bootstrapvue.js

Improving Vue Component on Navigation

I am facing an issue with my navbar where I have two versions. Version 1 features a white text color, while Version 2 has black text. The need for two versions arises due to some pages having a white background, hence the requirement for black text. Bot ...

javascriptcssvue.jsvuejs2

Vuetify Container with a set maximum width that remains fixed

I recently started developing a web application using Vue.js and Vuetify (https://vuetifyjs.com/en/). Currently, I have a basic layout with 3 columns. However, I noticed that the width of these columns is restricted to a maximum of 960px due to some defau ...

cssvue.jsvuetify.js

Vue: Implement out-in transition where the incoming element appears before the outgoing element has completely disappeared

Check out my code on Codepen: here In this scenario, I have set up two div elements: Block 1 and Block 2. The functionality I am looking for is when a button is clicked, Block 1 smoothly translates to the left until it goes out of view. Once that happens ...

javascriptcssvue.jsvuejs3