来自Lodash Groupby的嵌套VUE JS V-FOR

Question

我正在使用lodash groupby从数据库中分组我的数据

var vm = this
axios.get(this.buildURL())
.then(function(response) {
    Vue.set(vm.$data, 'model', response.data.model)
    vm.groupData = _.groupBy(vm.model.data,'categories')
})
.catch(function(error) {
    console.log(error)
}) 

，当我在Google Chrome上的Vue扩展中查看vue Extension时，我得到了这样的结果。

groupData: object
 > news: Array[2]
   > 0: Object
     name: "test article"
   > 1: Object
     name: "test article 2"
 > entertainment: Array[1]   
   > 0: Object
     name: "test article 3"

我想我只需要像这样做嵌套的v-for

<tr v-for="(items,index) in groupData">
    {{index}} // category name
     <tr v-if="items != null" v-for="item in items">
         <td>{{item.name}}</td> //article name
     </tr>
</tr>

，但我在控制台中遇到了错误

app.js：5428 [vue警告]：属性或方法"项目"未定义 实例但在渲染过程中引用。确保声明 数据选项中的反应性数据属性。

为什么会发生？我在哪里弄错了？

更新在html中，我想在表中创建行分组，所以我想要的就是这样

--------------------------------
name | created_at | updated_at |
--------------------------------
news //categori name
--------------------------------
test | 1/1/2017   | 2/1/2017   |
--------------------------------
test2| 1/1/2017   | 2/1/2017   |
--------------------------------
entertainment //categori name
--------------------------------
test| 1/1/2017   | 2/1/2017   |
--------------------------------

Answer 1

好的，所以在与HTML一起玩后（因为我已经知道什么时候出错了我的html），我想出了这个解决方案

<tbody v-for="(items,index) in groupData">
    <tr class="active border-double" v-if="isGroup">
      <td :colspan="thead.length"> // array for header, i just coun't how many header in the table to define colspan
        {{index}}
      </td>
    </tr>
    <tr v-for="item in items" :item="item">
        <td>{{item.name}}</td>
    </tr>
</tbody>