【问题标题】:access properties in v-repeat over array from objects in vue.js从 vue.js 中的对象通过数组访问 v-repeat 中的属性
【发布时间】:2015-12-21 12:22:29
【问题描述】:

我有一个包含 5 个类别的 json-result,我想用 v-repeat 循环。我使用 push-method 将结果传递给我的 vue-model。

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

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

console.log(this.categories) 给了我一个包含 5 个对象的数组,我无法从中显示属性...我做错了什么?

我尝试了各种方法,例如 $value、categorie: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 }} 的列表时,一切正常

【问题讨论】:

  • 您使用的是什么版本的 VueStrap。 v1.0.0 与 vue 0.12.x 不兼容
  • @Aman 我使用的是 0.12.x 版本。事实是它确实适用于列表,但不适用于选项卡。即使跳过 VueStrap 并使用引导程序中的导航选项卡。
  • 小提琴真的有助于诊断这个问题。你能创造一个吗?

标签: javascript json vue.js


【解决方案1】:

似乎是 0.12 的问题。升级到 1.0.x 将是解决方案!

【讨论】:

    猜你喜欢
    • 2013-06-06
    • 1970-01-01
    • 2019-02-08
    • 2018-03-16
    • 2018-12-31
    • 1970-01-01
    • 2021-11-18
    • 1970-01-01
    • 2015-08-03
    相关资源
    最近更新 更多