Update array with Composition api

Question

I'm using Vue with Pinia store installed.

export default {
  setup() {
    let rows: Row[] = store.history.rows;
  }
}

This works fine, but later I want to overwrite the array and filter it:

 const filterArray = () => {
      rows=store.history.rows;
       for (let index = 0; index < rows.length; index++){
        if (rows[index].department !== departmentModel.value) {
           rows.splice(index, 1);
        }
      }
    };

Somehow the filterArray method removes the objects from the store.history.rows array as well, so both of the arrays will be empty soon. What I want to archive is every time the filterArray is called, the rows array will be overwritten by the store.history.rows array (which contains all of the objects) and then the rows array will be filtered based on the if statement.

What am I doing wrong?

is this composition api or options api? (vuejs.org/guide/introduction.html#api-styles) — ericmp
– ericmp, Commented Nov 4, 2022 at 12:16
you're making a shallow copy when you need to make a deep copy — yoduh
– yoduh, Commented Nov 4, 2022 at 14:50
@yoduh FWIW, rows=store.history.rows is not a shallow copy but rather reference to the same array. rows = [...store.history.rows] is a shallow copy, which is fine as long as the array items themselves are not getting mutated. — Daniel
– Daniel, Commented Nov 4, 2022 at 19:08

Daniel · Accepted Answer · 2022-11-04 14:47:33Z

4

When you set rows = store.history.rows it doesn't make a copy of the array. It just ends up working like a pointer, referencing the same array.

You can avoid that by making a copy of the array before you proceed mutating it

rows = [...store.history.rows];

Or you use functional conventions, which IMHO is the preferred way anyway.

const filterArray = () => {
  rows = store.history.rows.filter(item => item.department === departmentModel.value)
}

this will create a new array of items that match a given departmentModel.value.

answered Nov 4, 2022 at 14:47

Daniel

35.9k17 gold badges115 silver badges163 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Update array with Composition api

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related