[Vuejs]-How do I pass an item in a Vuex list to a component?

by

2👍

✅

To me the first thing that comes to mind is that’s your nested item has no place to be inserted anyway. You might want to have a look at slots for nesting components like that:
https://v2.vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots

Anyway, a few considerations:

In your use case you are better off having the list in the event list item and repeat just the element that you actually need, rather than retrieving it in a useless component that only wraps around another component. I mean:

Vue.component('event-list-item', {   template: "<li v-for="item in list"><h4>{{ item.title }}</h4></li>

The store is considered the single source of truth also because it should be easier to access it from the directly impacted components, sparing you from having to hand down multiple props for several layers. Like you are doing. This base is kinda brittle for deeply nested components.

Keep in mind that each component has a different scope and they don’t share a thing that’s not explicitly passed.

👤Gigi

1👍

You should access the state items fields like key :

   <ul><li v-for='key in list'><event-list-item :item='key' /></li></ul>

and in tht child component :

   template: "<h4>{{ store.state.items[item].title }}</h4>"
👤Boussadjra Brahim

1👍

There is no problem of iterating through properties of items object. It will work the same way as iterating through an array.

<ul>
  <li 
    v-for="item in items"
    :key="item.title"
  >
    <event-list-item :item="item" />
  </li>
</ul>

For better practice, you can format data inside a getter, to assign keys and return a list that is ready for rendering so no additional logic is delegated to the component.

Note that key used in code example is for internal use of Vue, as it is a reserved special attribute and is suggested to be present when using v-for loops.

👤aBiscuit

Leave a comment