bootstrap-vue - table 在 AJAX 请求后不会更新 (vue2.js)

Question

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

我遵循了基本说明并添加了一个小改动，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" 变量用数据初始化后，但 table 仍然没有得到更新。

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

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

Answer 1

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

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

还是像这样：

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

}

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

Answer 2

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

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

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

{user_name: "user"}

它应该是这样的：

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

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

bootstrap-vue - table 在 AJAX 请求后不会更新 (vue2.js)

bootstrap-vue - table won't get updated after AJAX request (vue2.js)

javascript

ajax

vuejs2