Vue 中的簡單列表渲染，查找索引和傳遞道具

Question

所以我做開始的待辦事項列表的東西。 我有這個數組

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

我想為新聞數組中的每個條目在列表（NewsItemList）中列出項目（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>

這是我的 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. 我想通過我在 NewsItemList 中的數組 map 並將信息作為道具提供給我的 NewsItem。 最簡單的方法是什么？

2. 在 React 中，我需要使用 findIndex() function 來查找索引。 我如何在 vue 中做到這一點？

由於我剛剛開始，你能幫我找到一個簡單的方法嗎？ 謝謝！

Answer 1

道具

新聞項目

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

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

現在您可以在 NewsItemList 中使用它

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

Answer 2

如果我理解正確，您只需要使用新聞項 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>