將子組件綁定到組件數據導致 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>