vue.js watch function failing to update

Question

vue.js watch function failing to update

Hello, I'm just getting started with Vue and currently facing a challenge. I am attempting to update a couple of variables based on changes in another computed variable. The computed variable is connected to a Vuex store and functions correctly, displaying changing values. To calculate the derived variables, I set up a watch that monitors the computed variable and updates these values accordingly. However, I noticed that the watch function runs twice during the initialization process and then ceases to run, despite the computed values continuously updating. What could be causing this issue?

Here is the part that is working fine:

...
computed: {
    lastAndMarkPrice() {
      return store.getters.getLastAndMarkPriceByExchange(
        "deribit",
        store.getters.getAsset
      );
    },
...

But unfortunately, this section is not functioning as expected:

...
data: () => ({
    lastPriceUp: false,
    lastPriceDn: false,
    markPriceUp: false,
    markPriceDn: false,
  }),
...
watch: {
    lastAndMarkPrice (newValue, oldValue) {
      console.log(newValue, oldValue);
      this.lastPriceUp = newValue.lastPrice > oldValue.lastPrice;
      this.lastPriceDn = newValue.lastPrice < oldValue.lastPrice;
      this.markPriceUp = newValue.markPrice > oldValue.markPrice;
      this.markPriceDn = newValue.markPrice < oldValue.markPrice;
    },
  },
...

javascript vue.js vuex vuetify.js

Answer 1

Answer №1

Typically, a watch is shallow by default. When a new object is assigned to lastAndMarkPrice, the handler will be called but it won't detect mutations of properties within that object.

To create a deep watcher, you would need to implement something like this:

watch: {
  lastAndMarkPrice: {
    deep: true,

    handler (newValue, oldValue) {
      // ...
    }
  }
}

https://v2.vuejs.org/v2/api/#watch

The above approach is usually suitable, but in your specific scenario, it's more complex as you require access to old values. Using a deep watcher wouldn't solve this issue since it would only provide the same object.

To work around this problem, you can store copies of the old values somewhere so they remain accessible for comparison with the new values. One method to achieve this is having the computed property make a copy:

computed: {
  lastAndMarkPrice() {
    const prices = store.getters.getLastAndMarkPriceByExchange(
      "deribit",
      store.getters.getAsset
    );

    if (!prices) {
      return null;
    }

    return {
      lastPrice: prices.lastPrice,
      markPrice: prices.markPrice
    }
  }
}

With the code snippet above, each time the values of lastPrice or markPrice change, the computed property will rerun and generate a new object. This will trigger the watch handler with distinct old and new objects being passed. In this case, using deep isn't necessary since the object itself is being altered, not just its properties.

You could also simplify it slightly with...

return { ...prices }

...instead of explicitly copying the two properties.

Answer 2

Typically, a watch is shallow by default. When a new object is assigned to lastAndMarkPrice, the handler will be called but it won't detect mutations of properties within that object.

To create a deep watcher, you would need to implement something like this:

watch: {
  lastAndMarkPrice: {
    deep: true,

    handler (newValue, oldValue) {
      // ...
    }
  }
}

https://v2.vuejs.org/v2/api/#watch

The above approach is usually suitable, but in your specific scenario, it's more complex as you require access to old values. Using a deep watcher wouldn't solve this issue since it would only provide the same object.

To work around this problem, you can store copies of the old values somewhere so they remain accessible for comparison with the new values. One method to achieve this is having the computed property make a copy:

computed: {
  lastAndMarkPrice() {
    const prices = store.getters.getLastAndMarkPriceByExchange(
      "deribit",
      store.getters.getAsset
    );

    if (!prices) {
      return null;
    }

    return {
      lastPrice: prices.lastPrice,
      markPrice: prices.markPrice
    }
  }
}

With the code snippet above, each time the values of lastPrice or markPrice change, the computed property will rerun and generate a new object. This will trigger the watch handler with distinct old and new objects being passed. In this case, using deep isn't necessary since the object itself is being altered, not just its properties.

You could also simplify it slightly with...

return { ...prices }

...instead of explicitly copying the two properties.

vue.js watch function failing to update

Answer №1

Similar questions

Send the 'key' parameter to the React component

Enhancing user experience by implementing AJAX in a contact form to eliminate the need for page

What is the best way to display pages with different states in ExpressJS?

Using Vuex to calculate the percentage of values within an array of objects and dynamically updating this value in a component

Leveraging Vue multiselect for modifying Algolia database index

The server appears to be up and running, however there seems to be an issue when attempting to access the API as it is returning an Error: connect ECONNREFUSED 127.0.0.1

When viewing a React data table in Chromium browsers, the columns on the right side may flicker when the screen is small or the browser

Can you make two elements match each other at random?

What is the process for attaching the stack when initializing and throwing errors separately in JavaScript?

Unable to retrieve data from Meteor find query

Retrieving a Table Row from a TableView in Titanium Mobile

Modifying the default label for each bubble on a bubble chart with chartjs-plugin-datalabels

Is it possible to refresh text in table without clearing icons?

Utilize CSS with dynamically created elements

Invoking Javascript Functions using their names

looking to implement auto-scroll feature in flatlist using react native

Unexpected behavior encountered when running Angular 8 radio button checked function

Nuxt is unable to modify the data variable

Adjustable Panel Width

Some inquiries regarding the fundamentals of JavaScript - the significance of the dollar sign ($) and the error message "is not a function"