[Vuejs]-Simple List Rendering in Vue with finding Index and passing props

by

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>
👤Vojin Purić

1👍

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>
👤Nikola Pavicevic

Leave a comment