将子组件绑定到组件数据导致 Vue.js

Question

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

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

我已经管理使组件绑定到重复元素，但无法正确显示数据。 当前呈现的 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 的缩短版本在这里。

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

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 props 应该是 props，+description 和 link 没有设置。

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

Answer 2

你在 Post.vue 文件中将 prop: ['post'] 更改为 props:['post'] ，你可以试试下面的代码

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