Simple List Rendering in Vue with finding Index and passing props

Question

so I do the beginning todo list stuff. I have this array

state() {
        return {
            news: [
                {
                    id: 1,
                    title: "Titel 1",
                    text: "Beispieltext 1"
                },
                {
                    id: 2,
                    title: "Titel 2",
                    text: "Beispieltext 2"
                }
            ]
        }
    },

I want to list items (NewsItem) in a list (NewsItemList) for every entry in the news-array. As simple as that.

This is my NewsItem

<template>
  <div class="newsitem">
    <h1
        v-for="nachricht in news"
        :key="nachricht.id"
    >{{nachricht.title}}</h1>
    <p
        v-for="nachricht in news"
        :key="nachricht.id"
    >{{nachricht.text}}</p>
  </div>
</template>

<script>

export default {
  data() {
    return {};
  }
};
</script>

And this is my NewsItemList

<template>
  <ul>
    <li
        v-for="nachricht in news"
        :key="nachricht.id"
    >
      <NewsItem />
    </li>
  </ul>
</template>

<script>
import NewsItem from "@/components/NewsItem";

export default {
  components: {
    NewsItem,
  },
  computed: {
    news() {
      return this.$store.getters.getNewsList;
    }
  }
};
</script>

I want to map through my array in NewsItemList and give the information as props to my NewsItem. What is the simplest way?
In React, I needed to find the index with the findIndex() function. How can I do this in vue?

As I am just beginning, could you help me to find a simple way? Thank you!

Vojin Purić · Accepted Answer · 2022-09-26 10:59:17Z

1

Props

NewsItem

<template>
  <div class="newsitem">
    <h1>{{ title }}</h1>
    <p>{{ text }}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    text: String,
  },
  data() {
    return {}
  },
}
</script>

Now you can use that in your NewsItemList

<template>
  <ul>
    <li v-for="nachricht in news" :key="nachricht.id">
      <NewsItem :title="nachricht.title" :text="nachricht.text"/>
    </li>
  </ul>
</template>

answered Sep 26, 2022 at 10:59

Vojin Purić

2,3957 gold badges12 silver badges27 bronze badges

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

2 Comments

mikasa Over a year ago

So easy I feel dumb. Great. Thank you!

Vojin Purić Over a year ago

@mikasa Don't feel stupid, this is normal process of learning.

Nikola Pavicevic · Accepted Answer · 2022-09-26 11:00:03Z

If I understood you correctly, you just need to pass prop with news item object :

Vue.component('NewsItem', {
  template: `
    <div class="newsitem">
      <h1 >{{item.title}}</h1>
      <p>{{item.text}}</p>
    </div>
  `,
  props: ['item']
})
new Vue({
  el: "#demo",
  data() {
    return {
      news: [
          {
              id: 1,
              title: "Titel 1",
              text: "Beispieltext 1"
          },
          {
              id: 2,
              title: "Titel 2",
              text: "Beispieltext 2"
          }
      ]
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <ul>
    <li
        v-for="nachricht in news"
        :key="nachricht.id"
    >
      <news-item :item="nachricht"></news-item>
    </li>
  </ul>
</div>

Collectives™ on Stack Overflow

Simple List Rendering in Vue with finding Index and passing props

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related