bootstrap-vue - AJAX 请求后表不会更新（vue2.js）答案

【问题标题】：bootstrap-vue - table won't get updated after AJAX request (vue2.js)bootstrap-vue - AJAX 请求后表不会更新（vue2.js）
【发布时间】：2017-02-19 18:41:40
【问题描述】：

我是 vue.js 的新手，我看到这个很棒的库完全符合我的项目所需：Boostrap-Vue

example source code

我遵循了基本说明，并添加了一个小改动，即动态内容的 ajax 调用：

<layout :docs="docs">
    <template slot="demo">

        <b-table
                stripped
                hover
                :items="items"
                :fields="fields"
                :current-page="currentPage"
                :per-page="perPage"
                :filter="filter"
        >
            <template slot="name" scope="item">
                {{item.value.first}} {{item.value.last}}
            </template>

        </b-table>

    </template>

</layout>

导出默认值 {

    mounted () {
       this.get_data();
    },
    data() {
        return {
            docs: {
                component: 'bTable'
            },
            items: [],
            fields: {
                name: {label: 'Person Full name', sortable: true},
            },
            currentPage: 1,
            perPage: 5,
            filter: null
        };
    },
    methods: {
        get_data () {            
        this.$http.get("myapp/users").then(res => {
            if (res.body) {
                this.items = res.body;
            } else {
                this.error = true;
            }
        });
      }
    }
};

所以问题是 - 在我得到 Ajax 响应和使用数据初始化的“items”变量之后，表格仍然不会得到更新。

最奇怪的是，使用静态数据它可以正常工作（如示例源代码所示，没有 AJAX）。

知道为什么吗？谢谢！！！

【问题讨论】：

标签： javascript ajax vuejs2

【解决方案1】：

我发现了问题，看来需要根据我在响应中收到的值定义以下字段：

fields: {
            name: {label: 'Person Full name', sortable: true},
        }

所以如果我的 json 看起来像这样：

{user_name: "user"}

应该是这样的：

fields: {
            user_name: {label: 'Person Full name', sortable: true},
        }

无论如何，Yoram de Langen 感谢您的帮助！

【讨论】：

【解决方案2】：

您是否尝试调试res.body 及其包含的内容？你的myapp/users 返回的结构是什么？你是这样直接返回结构的吗：

[
    { "name": "item 1"},
    { "name": "item 1"},
]

或者看起来像这样：

{
    "result": [
        { "name": "item 1"},
        { "name": "item 1"},
    ]

}

如果是最新的，您的this.items = res.body 应该是：this.items = res.body.result

【讨论】：