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的简化版本为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

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元素

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>

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

2 个答案: