Vue Js Watch Deep

Posted on  by admin

Modified10 months ago. I'm trying to watch properties on a vue.js object, but i'm not getting the result that i want, my code is the following:.

And i have a v-model on an input like so:. Now when the page loads it logs watched in the console just once, whenever i change the input it doesn't log anything.

Yet when i put vueTable.filters = {name: 'something'}; after the table initalization it will trigger on every change.

Is this unexpected behaviour? or do we have to define all our properties in order for them to be watched? 11 gold badge1717 silver badges2929 bronze badges.

2929 bronze badges. The documentation covers this here. Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion.

By starting with an empty object and setting v-model to, you end up adding a property dynamically.

How to run a Watcher on page load with immediate

The best approach in this case would be to initialize the property in the data.

It doesn't have to have a value. 1414 gold badges188188 silver badges158158 bronze badges.

158158 bronze badges. You can use something with the looks of this . Using $set (as described in the observable will be correctly added.

22 gold badges1919 silver badges3030 bronze badges. 3030 bronze badges. You can put your filter object initialization in data property into the createdVue lifecycle hook.

How to watch nested objects with deep

33 gold badges3737 silver badges3939 bronze badges. 3939 bronze badges. Sometimes, we want to deep watch an array of objects and calculating the change with Vue.js.

In this article, we’ll look at how to deep watch an array of objects and calculating the change with Vue.js.

We can deep watch an array of objects and calculate the change with Vue.js with watchers.

For instance, we can write:. In App.vue , we have the people array that’s used to render the Person component with v-for .

Not the answer you're looking for? Browse other questions tagged javascriptvue.js or ask your own question.

We pass in the person as the value of the person prop. Then in Person , we add the props property to accept the person prop. And we have the p reactive property which we set to the copy of person as its value in the mounted hook.

In the p watcher in the watch property, we log the newValue value.

We set the deep option to true to let us watch for changes in objects. And in the template, we render and bind p.age as to the input value of the text input.

Now when we type into the text input, the p watcher should run and log the newValue.age value.

We can deep watch an array of objects and calculate the change with Vue.js with watchers.

  • In this Vue tutorial we learn how to watch data and computed properties with watchers and execute code in response to any changes.
  • We cover how to watch deep objects and arrays, run watchers on page load and when to use watchers instead of computed properties.
  • Watchers vs Computed Properties. If you want to follow along with the examples in this lesson, you will need an app generated by the Vue CLI.

If you already have one from the previous lesson, you can use it instead. A watcher allows us to monitor a piece of data, or computed property, and execute code in response to a change in that data.

Watchers are similar to computed propertiesbut their use cases are different. Before we get into that however, let’s see how to use watchers. We define a watcher as a function in thewatchoption of the component’s config object.

Vue requires the watcher method name to be the same as the data property we want to watch. A watcher has access to the most recent value (newValue) and the previous value (oldValue) of the data property.

It will monitor the data property and execute the logic in the watcher each time it receives a new value. noteA watcher does not return any value. It only works on other data, we don’t use it like a regular method in the template. To demonstrate, let’s create a counter example that increments or decrements a number when the user clicks a button.

We’ll use a watcher to check when the number gets to 5, then show an alert. When we run the example and increment the number to 5, it shows the alert. Although the example above works fine, there is a potential issue.

How to define and use a Watcher

If the number is above 5 and we click the ‘Decrement’ button, it will display the console log message again when it comes back to 5.

Let’s imagine that the number is a volume control. We want to alert the user that listening to a volume above 5 may damage their hearing.

But we don’t want to display the alert message when the user is already above 5 and turning the volume down.

As mentioned earlier, Vue automatically gives us the previous value of the data property as well.

We can use it to check if the new value is greater than the old value.

If so, the user is turning the volume up and only then do we display the alert.

Let’s modify the example above and check ifnewValueis greater thanoldValue.

The message will display when the number reaches 5. But if we go past and decrease it again, the message won’t show. Because watchers and computed properties monitor changes in data, a question that often comes up is when to use which.

Watchers provide a more generic way to react to data than computed properties. So, technically we can use watchers instead of computed properties, but it’s not recommended.

To demonstrate, we will revisit our full name example from the lesson on computed properties. In the example we have two input fields that take a first and last name from the user and store them into their respective data properties.

A computed property then combines the two names into a full name and displays it in a paragraph in the template.

We’ll change the logic to use a watcher instead of a computed property.

But, this is where we’ll run into some complications. A watcher can only monitor a single data property.

Watchers vs Computed Properties

To watch both the first and last names, we will need to use two watchers. A watcher cannot return a value, so we will need another data property to store the concatenated names.

Keeping the rules above in mind, let’s modify the example. If we run the example above in the browser, it works the same as the computed property example.

Even though this approach works, it’s not ideal to use in this situation. More code increases development time. More code is harder to test and debug.

It’s more difficult to read and see at a glance what is happening.

Now that we know more about the differences, we can answer the question: when do we actually use which? Use Computed Properties when:. You need to compose new data from more than one existing data sources.An example would be when we created a full name from the first and last name data properties.

You need to reduce the length of a variable.An example would be when we need to access a deeply nested property in an object and bind it to the View.

It will make our template less cluttered. Use Watchers when:. You want to check if a data or computed property has changed to a specific value in order to know if you are ready to perform an action.An example would be when we displayed an alert once the number in our counter reached 5.

You have to call an API in response to a change in data.An example would be a user clicking a button to receive a new inspirational quote, or upcoming events in their area etc.

Getting started

By default, a watcher will not run when a page first loads.

  • immediate
  • deep
  • handler

However, many times in an application you will want to display data from an API immediately. As an example, let’s consider a film review application.

Until the user performs a search, we don’t know which film they want to see a review for. So we want to show the most popular reviews of the latest film on the home page.

Let’s create a simplified version of such an application and simulate the API call with a console log. If we run the example in the browser and type a name, Vue will log the message with each keypress to the console.

So everything works as expected. Now let’s add a default value to thefilmNamedata property.

The idea here is that because we use thev-modeldirective, the default value we specify will show up in the input field. And because it’s in the input field, it should activate the watcher and print the message to the console.

If we run the example in the browser, the new default film name shows up in the input field. However, the console doesn’t display a message, indicating that the watcher didn’t activate.

That is the default behavior for a watcher. If we want it to run when the page loads, we need to set theimmediateoption of the watcher to true.

This also means we need to change the syntax of the watcher method. The method becomes an object with a function calledhandlerthat contains the watcher logic.