CODEWITHSUNDEEP
vue.js
j4ffa
j4ffa

Reputation: 55

Vue watchers and components

Vue newbie here - we are introducing Vue into an existing application bit by bit and therefore I am slightly constricted by this with regards to the back end. The Vue template gets an array of objects from the Django backend. Some of the objects returned are parents and others are children of the parents - identified by the parent_id.

These are rendered happily using various components to encapsulate some of the functionality.

The update end point for the back end is configured to take one single object and update the database accordingly, therefore the watcher must be able to identify which of the array of objects has been updated. From my understanding this isn’t possible for objects/arrays in Vue/Js as the before/after values aren’t available for anything other than simple types.

The workaround I have put in place is to clone the array of objects in a computed property, and then compare the new array to the computed array to identify which object has been modified in order to send that back to the back end.

Is this best practice, or am I going to fall foul to this decision later on down the line?

many thanks for your help

Upvotes: 0

Views: 250

Answers (1)

Mattias
Mattias

Reputation: 725

It would be better if you give the objects of the array their own components, so you have a vue component that takes as a prop the object and you then use a v-for on the array to create one instance of the "object component" for each object in the array.

Then you can have a watcher on the object prop in the object component and you will know exactly which object has changed and get better control.

Upvotes: 1

Related Questions