I have a json-result with 5 categories that I want to loop over with v-repeat. I use the push-method to pass the result to my vue-model.
The setup is 5 different categories to which my records belong. Each category must be shown in a different tab (I removed the category-filter on my results cause is not related to the issue).
The records are showing perfectly (v-repeat="results") and I also get 5 tabs but no values (text neither value).
console.log(this.categories) gives me an array of 5 objects from which I don't succeed to show the properties...what am I doing wrong?
I tried all kinds of things like $value, categorie:categories, ...
JSON-result from my api-call over my categories:
{
status: "success",
data: {
results: {
general: "Algemeen",
metadata: "Meta-data",
facebook: "Facebook",
twitter: "Twitter",
googleplus: "Google+"
}
}
}
The fetching in my Vue-file:
fetchCategories: function(){
this.$http.get('/api/tokens/categories', function (response) {
for(var prop in response.data.results) {
this.categories.push({text: response.data.results[prop], value: prop});
}
});
},
And my view:
<tabs>
<tab v-repeat="category in categories" header="@{{ category.text }}">
<div id="@{{ category.value }}">
<table id="@{{ category.value }}-token-list" class="data-list">
<tr>
<th>id</th>
<th>categorie</th>
<th>naam</th>
<th>slug</th>
</tr>
<tr v-repeat="results" v-class="odd: (index%2!=0)">
<td>@{{ id }}</td>
<td>@{{ category }} </td>
<td>@{{ name }} </td>
<td>@{{ slug }}</td>
</tr>
</table>
</div>
</tab>
</tabs>
EDIT:
I do get my value when I write this:
@{{ categories[0].text }} or @{{ categories[0].value}}
EDIT 2:
it is a problem with the tab-functionality from VueStrap. When I use just a list with @{{ value }} it all work just fine
