Watcher doesn't detect modifications in array values

Question

Watcher doesn't detect modifications in array values

I am working with a basic array structure that looks like this:

dates[2]
  0:"2018-01-09T15:00:00.000Z"
  1:"2018-01-10T14:00:00.000Z"

My watcher is configured as follows:

data() {
    return {        
        dates: [],
    }
}

watch: {
    // this function will run whenever dates changes
    dates: {
        handler: function(before, after) {
            console.log('dates has been changed');
        },
        deep: true
    }
},

Currently, the watcher only detects when an element is added or removed from the array, not when the value (time) changes.

Is there a way to achieve the desired behavior?

javascript vue.js

Answer 1

Answer №1

Because of the way JavaScript works, Vue has difficulty detecting certain changes to arrays:

If you directly replace an item using its index, such as vm.items[indexOfItem] = newValue

If you change the length of the array, for example, vm.items.length = newLength

To address the first issue, the following two methods achieve the same result as vm.items[indexOfItem] = newValue, while also triggering state updates in the reactivity system:

// Using Vue.set
Vue.set(example1.items, indexOfItem, newValue)

// Using Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

To handle the second issue, you can use splice:

example1.items.splice(newLength)

Source: https://v2.vuejs.org/v2/guide/list.html#Caveats

Answer 2

Because of the way JavaScript works, Vue has difficulty detecting certain changes to arrays:

If you directly replace an item using its index, such as vm.items[indexOfItem] = newValue

If you change the length of the array, for example, vm.items.length = newLength

To address the first issue, the following two methods achieve the same result as vm.items[indexOfItem] = newValue, while also triggering state updates in the reactivity system:

// Using Vue.set
Vue.set(example1.items, indexOfItem, newValue)

// Using Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

To handle the second issue, you can use splice:

example1.items.splice(newLength)

Source: https://v2.vuejs.org/v2/guide/list.html#Caveats

Watcher doesn't detect modifications in array values

Answer №1

Similar questions

Transmit information from node.js to the frontend utilizing only raw JavaScript

React-Tooltip trimming

Activate Cross-Origin Resource Sharing for GraphQL requests

Clicking on a span will allow you to alter the text within a paragraph located in a

Transferring an Array from PHP to Javascript

node js retrieves information from the request body

Determine the number of rows in an Excel spreadsheet using JavaScript

Utilize the fetch function within a React functional component

Can you provide me with the URL for the jQuery post function?

Alter the class of the div element every three seconds

It appears that using "object[prop]" as a name attribute does not function properly in HTML

Can you outline the key distinctions between AngularJS and ReactJS?

Do not directly change a prop because it will be replaced with a new value whenever the parent component is re-rendered

Navigating TS errors when dealing with child components in Vue and Typescript

Tips for incrementing a number by 1 at random intervals using jQuery

What is the process for retrieving paginated data from the store or fetching new data from an API service within an Angular 2 application using ngrx-effects?

What is the importance of having the same data type for the searchElement in the argument for Array.prototype.includes()?

Defining optional parameters in TypeScript

Personalized modify and remove elements on a row of the DataGrid material-ui version 5 component when hovered over

Encapsulating the React Material-ui Datepicker and Timepicker OnChange event callback functionging