Pause for Vue variable status update

Is there a way to trigger code execution when a variable changes?

For example: $store.state.AppStatus starts as "busy" when a Vue component is loaded and then changes to "ready"

I want to run a bootstrap function after $store.state.AppStatus changes to "ready"

Currently, I am using setTimeout but it's not ideal...

This is my code within the mounted hook:

  mounted() {
    
    if (window.location.hash) {
      console.log(this.$store.state.AppStatus)
       setTimeout(() => {
            $(`a[href="${window.location.hash}"]`).tab('show')
          }, 1000);
      
    }  
  },
javascriptvue.js

Answer №1

If you need to react to data changes in Vue.js, consider utilizing a Vue Watcher - https://v2.vuejs.org/v2/guide/computed.html#Watchers

While computed properties are suitable for most scenarios, there are instances where a custom watcher is required. That's why Vue offers a more versatile approach to respond to data modifications using the watch option. This is especially handy when handling asynchronous or resource-intensive tasks triggered by changing data.

watch: {
  '$store.state.AppStatus': function() {
    $(`a[href="${window.location.hash}"]`).tab('show')
  }
}

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

Tips for utilizing template literals with the require method: (require(`${aSpecificPath}`))

Trying to dynamically retrieve paths to images from an Array in Vue and showcase lazyloaded images with a v-for loop has raised some challenges. The code functions properly with template literals, but encounters an error stating "cannot find module: ' ...

javascriptvue.jsnode-modulesrequire

Ways to transfer selected options from a dropdown menu to a higher-level component

I am currently in the process of configuring a modal component that showcases various data from a specific record to the user. The user is provided with a Bulma dropdown component for each field, enabling them to make changes as needed. To streamline the c ...

typescriptvue.jsbulma

After signing out, the function getRedirectResult in Firebase is being invoked

I'm a bit confused about some interesting behavior I've noticed while working with Firebase. Although I never used the older version, I believe getRedirectResult is a newer feature since they partnered with Google. Currently, I am using Vue.js a ...

javascriptfirebasevue.jsfirebase-authenticationvue-router

Universal form submission via ajax

Issue with ajax/javascript: I am working on an application that includes multiple forms. My goal is to create a generic JavaScript function that can submit forms to their respective controllers by using the form ID. I have successfully retrieved the form I ...

javascriptphpajaxforms

I need to use JavaScript to create HTML to PDF and then upload the PDF file to a SharePoint Document Library

Our current project requires us to convert HTML to PDF and save it in a SharePoint Document Library. While we have successfully converted the HTML to PDF using Kendo plugin, we are facing challenges with storing it in SharePoint. It's worth noting th ...

javascriptsharepoint

Error in NodeJs: Port 3000 is already in use due to the utilization of socket.io and express

I've developed a node.js application using socket.io and express. The code snippet is as follows: const express=require('express'); const app=express(); const http=require('http').Server(app); app.use(express.static('public&ap ...

javascriptnode.jsexpresssocket.ioport

vue form is returning empty objects rather than the actual input data

I am attempting to transfer data from my component to a view in order for the view to save the data in a JSON file. I have verified that the view is functioning correctly as I attempted to log the data in the component and found it to be empty, and the r ...

javascripthtmlformsvue.jsvuejs3

selectize.js typescript: Unable to access values of an undefined object (reading '0')

I've been working on incorporating selectize.js into my project using webpack and typescript. After installing selectize.js and the necessary types, I added the following to my code: yarn add @selectize/selectize yarn add @types/select2 Within my c ...

javascripttypescriptwebpackconfigurationselectize.js

Autocomplete fails to recognize any modifications made to the original object

I am currently utilizing the jQuery library's autocomplete() method on a text input field, setting Object.getOwnPropertyNames(projects) as the source: $(function() { $("#project").autocomplete({source: Object.getOwnPropertyNames(projects)}); } B ...

javascriptjqueryjquery-uiautocompletejquery-autocomplete

Guide on converting JSON data into a PDF using TypeScript

I need to take JSON data and convert it into a PDF format when the PDF button is clicked in the UI. I have tried a few things but I'm struggling with binding the response to the PDF function. My goal is to display values from the "actualExpenses" arra ...

javascriptangularpdfjspdf

Issue with child component display

I cannot figure out why my component is not appearing on the page at all. It shows up as <signinform></signinform>. Even though I am using react-form, I don't think that is the reason for it not rendering. signin.js import React from &ap ...

javascriptreactjsreduxredux-form

Struggling to find the right method for inserting an element using a template in VueJS

Looking to incorporate Vue for updating my static HTML content. I want to modify certain elements by changing their inner HTML, icons, or specific parts of it, and also introduce a new element to the DOM. My preference is to utilize templates when adding a ...

vue.js

Interacting with PHP through JavaScript function calls

I am facing some frustration with my website due to an issue involving PHP. When I retrieve data from a PHP file, it returns a JSON list like this: {"Data":{"Recipes":{"Recipe_5":{"ID":"5","TITLE":"Spaghetti Bolognese"},"Recipe_7":{"ID":"7","TITLE":"Wurst ...

javascripthtmljson

Error in Taiwlind CSS: Styles are not loading in production environment but are working fine in development environment. This issue is encountered while using Next.js in

After reading various blog posts online, I put together this code snippet. The confusion arises from blogs using autoprefixer while others use postcss-preset-env. In my setup, I have added tailwindcss as a development dependency and properly imported the ...

javascriptcssnext.jstailwind-cssmdxjs

Automatically closing conditional statement/loop

I'm experiencing an issue with the following if condition: function turnLedOn1(evt) { led.on(); var executed = false; if (!executed) { executed = true; checkin1 = timestamp; alert('checkin1'); } } De ...

javascriptif-statement

Is it possible to combine useEffect with asynchronous functions?

Here is the code snippet in question: useFocusEffect( useCallback(async () => { const user = JSON.parse(await AsyncStorage.getItem("user")); if (user.uid) { const dbRef = ref(dbDatabase, "/activity/" + user.uid); ...

javascriptreactjsreact-native

Can one utilize the retrieval of past history or document state as a form of navigation within a browser?

Concerned that I may not receive a response from Stack Overflow due to lack of response on my previous question. While not necessary to fully read the previous question, it may provide context for my current inquiry. My company offers an HTML document bui ...

javascripthtmlgoogle-chromesafarimicrosoft-edge

Tips for updating the minimum value to the current page when the button is pressed on the input range

When I press the next button on the current page, I want to update the value in a certain way. https://i.stack.imgur.com/XEiMa.jpg I have written the following code but it is not working as expected: el.delegate(".nextbtn", "click", f ...

javascripthtmljquery

Difficulty with deploying Next.js to Vercel due to restrictions on rate limits when utilizing getStaticProps()

In my Next.js project connected to Apollo, I have around 50 static URLs fetching data using getStaticProps(). The performance is great, and I enjoy how the pages load. However, a problem arises when Vercel builds the static versions of these pages during d ...

javascriptnext.jsapollovercel

What could be causing the jQuery news ticker to malfunction on my site?

I recently made some changes to my main page by embedding HTML and adding the following code/script: <ul class="newsticker"> <li>Etiam imperdiet volutpat libero eu tristique.</li> <li>Curabitur porttitor ante eget hendrerit ...

javascriptphpjqueryhtml