Привязка подкомпонента к данным компонента приводит к Vue.js

Question

Я пытаюсь изучить Vue.js (2), создав простую программу чтения RSS. Я перешел мимо начального представления одного компонента и теперь пытаюсь преобразовать мой код в компонент (RSSFeed) с повторяющимися подкомпонентами (FeedPost).

App.vue
    |
    |
    RSSFeed.vue
        |
        |
        FeedPost.vue

Мне удалось связать компонент make с повторяющимся элементом, но не могу правильно отобразить данные. В настоящее время отрендеренный HTML показывает следующий результат:

    <ol data-v-f1de79a0="" id="feed">
        <li data-v-f1de79a0="" post="[object Object]" class="RSSFeed"></li>
        <li data-v-f1de79a0="" post="[object Object]" class="RSSFeed"></li>
        ...
        <li data-v-f1de79a0="" post="[object Object]" class="RSSFeed"></li>
    </ol>

Я полагаю, что ошибка связана с моим элементом props, но я не уверен, куда я отклонился от Руководства по основам компонентов . Сокращенная версия JSON, возвращаемая моим сервером приложений: здесь .

RSSFeed.vue

<template>
    <ol id="feed">
      <li class="RSSFeed"
        v-for="item in items"
        v-bind:key="item.indexOf"
        v-bind:post="item">
      </li>
    </ol>
</template>

<script>
import axios from 'axios'
import Post from './Post'

export default {
  name: 'RSSFeed',
  props: {Post},
  data () {
    return {
      items: [],
      errors: []
    }
  },
  created () {
    axios.get(`http://localhost:5000/rss/api/v1.0/feed`)
      .then(response => {
        // JSON responses are automatically parsed.
        this.items = response.data.rss.channel.item
      })
      .catch(e => {
        this.errors.push(e)
      })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Post.vue

<template>
  <div id="post">
    {{post.title}}
    {{post.pubDate}}
    {{description}}
    {{link}}
  </div>
</template>

<script>
export default {
  name: 'Post',
  prop: ['post']
}
</script>

<style scoped>
</style>

Answer 1

Вы меняете prop: ['post'] на props: ['post'] в файле Post.vue, вы можете попробовать следующий код

//RSSFeed.vue
<template>
    <ol id="feed">
      <Post class="RSSFeed"
        v-for="item in items"
        v-bind:key="item.indexOf"
        v-bind:post="item">
      </Post>
    </ol>
</template>

<script>
import Post from './Post'
export default {
  data () {
    return {
      items: [
        {
          "title":"Vuejs Nodejs",
          "pubDate":"20-07-2018",
          "description":"Leading vuejs nodejs",
          "link":"https://hoanguyenit.com"
        }
      ],
      errors: []
    }
  },
  components: {
    Post
  },
}
</script>

//Post.vue
<template>
  <div id="post">
    {{post.title}}
    {{post.pubDate}}
    {{post.description}}
    {{post.link}}
  </div>
</template>

<script>
export default {
  props: ['post'],
}
</script>

<style scoped>
</style>

Answer 2

Без тестирования я вижу некоторые проблемы:

В RSSFeed.vue

props: {Post}

должно быть

components: {Post}

Затем вы используете такой компонент, как:

<template>
    <ol id="feed">
      <Post class="RSSFeed"
        v-for="item in items"
        v-bind:key="item.indexOf"
        v-bind:post="item">
      </Post>
    </ol>
</template>

В Post.vue реквизиты должны быть реквизиты, + описание и ссылка не заданы.

Скорее всего, это выглядит как post="[object Object]", потому что вы привязываете его к обычному элементу HTML