javascript - 将子组件绑定(bind)到组件数据导致 Vue.js

Question

我正在尝试通过构建一个简单的 RSS 阅读器来学习 Vue.js(2)。我已经超越了最初的单一组件 View ，现在正尝试将我的代码重构为一个具有重复子组件 (FeedPost) 的组件 (RSSFeed)。

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

我已经设法使组件绑定(bind)到重复元素，但无法使数据正确显示。当前呈现的 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 元素上，但我不确定我偏离了哪里 Components Basics Guide .我的应用程序服务器返回的 JSON 的缩短版本是 here .

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

未经测试，我可以看到一些问题:

在 RSSFeed.vue

Prop :{Post}

应该是

组件:{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中prop应该是props，+description和link没有设置。

它很可能看起来像 post="[object Object]" 因为您将它绑定(bind)到一个普通的 HTML 元素