Binding a sub-component to a components data result in Vue.js

Question

I'm trying to learn Vue.js(2) by building a simple RSS reader. I've moved past the initial single component view and am now trying to refactor my code into a component (RSSFeed) with repeating sub-components (FeedPost).

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

I've managed the make the component bind to a repeating element but can't get the data to correctly appear. Currently the rendered HTML shows the following result:

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

I believe the error is around my props element but I'm unsure on where I've strayed from Components Basics Guide. A shortened version of the JSON returned by my app server is 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>

Lawrence Cherone · Accepted Answer · 2018-06-30 01:38:49Z

1

Without testing, I can see some issues:

In RSSFeed.vue

props: {Post}

should be

components: {Post}

Then you use the component like:

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

In Post.vue prop should be props, + description and link are not set.

It most likely looks like post="[object Object]" because your binding it to a normal HTML element

edited Jun 30, 2018 at 1:38

answered Jun 30, 2018 at 0:44

Lawrence Cherone

46.7k7 gold badges66 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael Betterton Over a year ago

You're correct, my error was a combination of using <li> instead of <Post> in RSSFeed.vue, having singular prop instead of props in Post.vue and using prop instead of components in RSSFeed.vue.

Hòa Nguyễn Coder · Accepted Answer · 2018-06-30 01:32:43Z

0

You change prop: ['post'] to props:['post'] in file Post.vue, you can try the following code

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

answered Jun 30, 2018 at 1:32

Hòa Nguyễn Coder

4433 silver badges8 bronze badges

1 Comment

Michael Betterton Over a year ago

This answer also works, however the other poster was first.

Collectives™ on Stack Overflow

Binding a sub-component to a components data result in Vue.js

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related