将数据传递到v-for

时间:2017-03-23 18:24:38

标签: wordpress vuejs2

我现在正在努力解决这个问题。我正在做一个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>

1 个答案:

答案 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'
}