[Vuejs]-Cannot add/remove sealed array elements

by

0👍

Your API call is apparently returning an object (fetchedProperty) with a photos array that has been sealed via Object.seal.

You are setting your property data property to Object.assign({}, fetchedProperty), which is assigning the value of each property in fetchedProperty to an empty array.

This still means that the value of photos (which is a sealed array) is getting set to the empty object being assigned to your property data property.

You need to explicitly copy the values of the photos array and set that to the photos property of the data property. Maybe something like this:

async asyncData({ params }) {
  const fetchedProperty = await api.properties.findOne(params.id);
  let property = Object.assign({}, fetchedProperty);
  let property.photos = [...fetchedProperty.photos];

  return {
    oldProperty: fetchedProperty,
    property: property
  };
}

0👍

Another way to delete a sealed Object is using slice is

this.property.photos = this.property.photos.slice(0, idx).concat(this.property.photos.slice(idx + 1));

In your function as:

async deletePhoto(photoId, driveId, index) {
    this.property.photos = this.property.photos.slice(0, idx).concat(this.property.photos.slice(idx + 1));
    await api.photos.remove(this.property.id, photoId, driveId);
},

Leave a comment