Deleting an object by key doesn't update the vue component

Question

I am trying to delete a object using its key and expecting to update the component. I am using vuex.

Here is how I am trying

My object structure is something like this

115:Object
116:Object

I have the key (115, 116) so I am trying to delete them.

delete state.fixture[i]

This code delete the object but the problem is component is not updated even though state of fixture has changed now. How can I update it? Thank you.

Answer 1

Use

import Vue from 'vue'

Vue.delete(state.fixture, i)

Vue.delete

Delete a property on an object. If the object is reactive, ensure the deletion triggers view updates. This is primarily used to get around the limitation that Vue cannot detect property deletions, but you should rarely need to use it.

The function takes an object and a key to delete from the object.

If you are interested in adding a new property to an object, check Vue.set