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响应和＆＃34;项目＆＃34;变量用数据初始化但表格仍未获得更新。

最奇怪的是，静态数据的工作正常（如示例源代码所示，没有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感谢您的帮助！

Answer 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

bootstrap-vue - 在AJAX请求后，表格未获得更新（vue2.js）

2 个答案: