Pattern to add user-interface relevant data to Vue array props?

Question

If props are not editable how does one go about adding data relevant to the user interface in a local component?

Say you receive an Array of blog posts, each post can be iterated in the interface with v-for - but each elements also needs a few extra properties only relevant to the interface like "is_active" or "is_expanded".

How does one go about adding these extra properties to each element in the array received from the prop if props should not be modified?

In particular case i am using inertia.js

So the data can not be modified outside of the component that receives the prop - in a Vuex setup one might mutate the data from the backend and prepare it for the interface before going to the component, but this isn't available here.

Faran Ali · Accepted Answer · 2020-09-29 13:17:54Z

1

create a computed property which maps the prop array and adds the extra properties

computed:{
    _array(){
      return this.propArray.map((item) => { 
                                  return {
                                    ...item,is_active:false,is_expanded:false
})

    }
  }

answered Sep 29, 2020 at 13:17

Faran Ali

4823 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

Pattern to add user-interface relevant data to Vue array props?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related