从vue.js中的对象访问v-repeat-overarray中的属性

access properties in v-repeat over array from objects in vue.js

本文关键字:v-repeat-overarray 属性 访问 对象 vue js      更新时间:2023-09-26

我有一个json结果,其中有5个类别,我想用v-repeat循环。我使用push方法将结果传递给我的vue模型。

设置是我的记录所属的5个不同类别。每个类别都必须显示在不同的选项卡中(我删除了结果上的类别过滤器,因为这与问题无关)。

记录显示得很好(v-repeat="results"),我也得到了5个选项卡,但没有值(文本和值都没有)。

console.log(this.categories)给了我一个由5个对象组成的数组,我无法成功地显示其中的属性。。。我做错了什么?

我尝试了各种各样的东西,比如$value,category:categories。。。

通过我的类别调用api得到的JSON结果:

{
    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将是解决方案!