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 >
    <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>

1. I want to map through my array in NewsItemList and give the information as props to my NewsItem. What is the simplest way?

2. 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!

CodePudding user response：

Props

NewsItem

<template>
  <div >
    <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>

CodePudding user response：

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

Vue.component('NewsItem', {
  template: `
    <div >
      <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>