在VueJS

Question

我试图在嵌套数组中选择一个对象的值。从API返回的数据如下所示

[
   {
      "id":1,
      "data":value,
      "posts":[
         {
            "data":value,
            "user":{
               "data":value
            }
         }
      ]
   },
   {
      "id":2,
      "data":value,
      "posts":[
         {
            "data":value,
            "user":{
               "data":value
            }
         }
      ]
   }
]

我的HTML看起来像这样（items表示从API接收的内容，由适当的method提取）

<my-component v-for="item in items" :key="post.id">
 {{ item.posts[0].user.data }}
</my-component>

页面数据

data: () => ({
        items: []
    }),
beforeRouteUpdate (to, from, next) {
    this.search(to.params.query)
    next()
},
methods: {
   search() {
      // search stuff then response recieved thanks to Axios
      this.items = response.data
    }
}

组件数据

<template>
  <div class="card facebook-card">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'my-component'
}
</script>

返回错误，因为该值为null。我试图在输出中控制日志记录数据 - 它也返回null，但item.posts[0]按预期返回。这里发生了什么？如何访问子数组属性？