从 vue.js 中的对象访问数组中的 v-repeat 属性
access properties in v-repeat over array from objects in vue.js
我有一个 json-result 有 5 个类别,我想用 v-repeat 循环。我使用 push-method 将结果传递给我的 vue-model。
设置是我的记录所属的 5 个不同类别。每个类别必须显示在不同的选项卡中(我删除了结果中的类别过滤器,因为与该问题无关)。
记录显示完美 (v-repeat="results"),我也得到 5 个选项卡但没有值(文本都没有值)。
console.log(this.categories) 给了我一个包含 5 个对象的数组,我无法从中成功显示属性...我做错了什么?
我尝试了各种方法,例如 $value、categorie:categories、...
JSON-我的 api-调用我的类别的结果:
{
status: "success",
data: {
results: {
general: "Algemeen",
metadata: "Meta-data",
facebook: "Facebook",
twitter: "Twitter",
googleplus: "Google+"
}
}
}
在我的 Vue 文件中获取:
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});
}
});
},
而我的观点:
<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>
编辑:
当我写这篇文章时,我确实得到了我的价值:
@{{ categories[0].text }} or @{{ categories[0].value}}
编辑 2:
这是 VueStrap 的选项卡功能的问题。当我只使用带有 @{{ value }} 的列表时,一切正常
似乎是 0.12 的问题。升级到 1.0.x 将是解决方案!
我有一个 json-result 有 5 个类别,我想用 v-repeat 循环。我使用 push-method 将结果传递给我的 vue-model。
设置是我的记录所属的 5 个不同类别。每个类别必须显示在不同的选项卡中(我删除了结果中的类别过滤器,因为与该问题无关)。
记录显示完美 (v-repeat="results"),我也得到 5 个选项卡但没有值(文本都没有值)。
console.log(this.categories) 给了我一个包含 5 个对象的数组,我无法从中成功显示属性...我做错了什么?
我尝试了各种方法,例如 $value、categorie:categories、...
JSON-我的 api-调用我的类别的结果:
{
status: "success",
data: {
results: {
general: "Algemeen",
metadata: "Meta-data",
facebook: "Facebook",
twitter: "Twitter",
googleplus: "Google+"
}
}
}
在我的 Vue 文件中获取:
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});
}
});
},
而我的观点:
<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>
编辑:
当我写这篇文章时,我确实得到了我的价值:
@{{ categories[0].text }} or @{{ categories[0].value}}
编辑 2:
这是 VueStrap 的选项卡功能的问题。当我只使用带有 @{{ value }} 的列表时,一切正常
似乎是 0.12 的问题。升级到 1.0.x 将是解决方案!