来自lodash groupby的嵌套vue js v-for答案

【问题标题】：Nested vue js v-for from lodash groupby来自lodash groupby的嵌套vue js v-for
【发布时间】：2017-09-15 03:05:35
【问题描述】：

我正在像这样使用 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)
})

当我在谷歌浏览器的 vue 扩展中查看它时，我在 groupData 中得到了这个结果

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   |
--------------------------------

【问题讨论】：

我正在表中进行行分组，尚未测试...因为该错误
是的，我在内扭曲它

标签： javascript vue.js vuejs2 lodash

【解决方案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>

【讨论】：