[Vuejs]-Are objects in reactive arrays reactive

by

1👍

In Vue 3 and Pinia, objects in a reactive array are reactive. But your current code doesn’t update the store when you change activeQn because each assignment makes a new reference.

To keep the same reference, don’t reassign activeQn. Instead, directly change its properties. For example:

// MyComponent.vue
const activeQn = reactive({...getDisplayedQuestion(0)});
activeQn.text = "New text"; // changes will reflect in store

And, instead of replacing the question in the store, update its properties:

// in QuestionStore.ts
function setDisplayedQuestion(i : Number, q : qn) {
  Object.assign(displayedQuestions.qnArray[i], q);
}

With these changes, updates to activeQn should be reflected in the store.

Hope this helps! 🌷

👤Ali Bahrami

Leave a comment