How to reset reactive array in VueJs

Question

I have an array plan defined using store state management as follows:

import { reactive } from 'vue'

export const store = reactive({
    plan: []
})

I want to reset this array before filling it again, I have tried:

import { store } from "./store.js";
store.plan = [];
store.plan = newPlan; // store.plan is accumulated here without reset!

Can you please tell me how can I reset this reactive array before assigning the new array to it?

Accumulated? Are you sure newPlan does not contain more than you think? — Wimanicesir, Feb 13 '23 at 14:34
@Wimanicesir Yes, I'm sure, I have investigated the values using `console.log()` before and after. — Bilal, Feb 13 '23 at 14:35
Did you tried to clear it with like `store.plan.splice(0, store.plan.length)` ? — Elikill58, Feb 13 '23 at 14:42

score 0 · Accepted Answer · answered Feb 13 '23 at 15:08

Actually, you are creating a new instance for the array. As the objective of reactive function is to share the same instance, it keeps the old array.

You should edit the array instance by cleaning it like that:

store.plan.splice(0, store.plan.length)

You can also use store.plan.length = 0.

How to reset reactive array in VueJs

1 Answers1