When fetching data from a database, I am using lodash groupby to group my data like so:
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)
})
After grouping the data, I can see the result in the groupData variable when using the Vue extension in Google Chrome:
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"
I attempted to use nested v-for to display the data:
<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>
However, I encountered an error in the console:
app.js:5428 [Vue warn]: Property or method "items" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
Why is this happening and where did I go wrong?
Update: In the HTML, I am trying to create row grouping in a table to display the data like this:
--------------------------------
name | created_at | updated_at |
--------------------------------
news //category name
--------------------------------
test | 1/1/2017 | 2/1/2017 |
--------------------------------
test2| 1/1/2017 | 2/1/2017 |
--------------------------------
entertainment //category name
--------------------------------
test| 1/1/2017 | 2/1/2017 |
--------------------------------