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

Question

我对 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)。

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

Answer 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谢谢您的帮助!