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扩展程序中查看时，我在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警告]：未定义属性或方法“items” 实例，但在渲染期间引用。一定要申报数据选项中的反应数据属性。

为什么会这样？我哪里出错？

更新在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>

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

1 个答案: