Vue 中的简单列表渲染，查找索引和传递道具

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>

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!

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

Answer 2

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>