我现在正在努力解决这个问题。我正在做一个v-for使用一个名为Post的自定义组件循环遍历一系列wordpress帖子。值得注意的是,如果我放置一个常规的HTML元素,循环就会起作用(注意下面的<li>
元素)。这就是我的Hello.vue的样子:
<template>
<div>
<section class="posts__Feed">
<ul class="posts__List">
<post v-for="item in posts" v-bind="item" :item="item" :key="item.id"></post>
<li v-for="item in posts">{{ item.id }}</li>
</ul>
</section>
</div>
</template>
<script>
var postsUrl = '/wp-json/wp/v2/posts/'
import Post from '@/components/Post.vue'
export default {
name: 'hello',
components: {
Post
},
data () {
return {
posts: []
}
},
beforeCreate () {
this.$http.get(postsUrl).then((response) => {
this.posts = response.data
})
}
}
</script>
这是我的Post.vue文件:
<template>
<li>
<p class="posts__ItemAuthor">{{ item.id }}</p>
</li>
</template>
<script>
export default {
name: 'post',
data () {
return {
item: []
}
}
}
</script>
答案 0 :(得分:0)
v-bind
应与您绑定的属性结合使用
<post v-for="item in posts" v-bind:item="item" :key="item.id"></post>
您的组件应接受item
作为属性。
export default {
props:["item"],
name: 'post'
}