[英]Binding a sub-component to a components data result in Vue.js
I'm trying to learn Vue.js(2) by building a simple RSS reader.我正在尝试通过构建一个简单的 RSS 阅读器来学习 Vue.js(2)。 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).我已经超越了最初的单个组件视图,现在正试图将我的代码重构为具有重复子组件 (FeedPost) 的组件 (RSSFeed)。
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:当前呈现的 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>
I believe the error is around my props element but I'm unsure on where I've strayed from Components Basics Guide .我相信错误出在我的 props 元素附近,但我不确定我在哪里偏离了Components Basics Guide 。 A shortened version of the JSON returned by my app server is here .我的应用服务器返回的 JSON 的缩短版本在这里。
RSSFeed.vue 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 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>
Without testing, I can see some issues:未经测试,我可以看到一些问题:
In RSSFeed.vue
在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.在Post.vue
props 应该是 props,+description 和 link 没有设置。
It most likely looks like post="[object Object]"
because your binding it to a normal HTML element它很可能看起来像post="[object Object]"
因为你将它绑定到一个普通的 HTML 元素
You change prop: ['post'] to props:['post'] in file Post.vue, you can try the following code你在 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.