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

Question

I'm pretty new with vue.js and I saw this great library that doing exactly what I need for my project: Boostrap-Vue

I followed the basic instructions and I've added an small change, ajax call for dynamic content:

<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>

export default {

    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;
            }
        });
      }
    }
};

So the problem is - after I'm getting the Ajax response and the "items" variable initialized with the data but the table still won't get update.

The strangest part is that with static data its works fine (as shown in the example source code, without AJAX).

Any idea why? Thanks!!!

Community · Accepted Answer · 2017-05-23 11:46:25Z

2

I found the problem, it seems that it necessary to define the following fields according to the value I received in the response:

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

so if my json looks like this:

{user_name: "user"}

it should look like this:

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

Anyway, Yoram de Langen Thanks for the help!

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Feb 20, 2017 at 8:32

Avib

731 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yoram de Langen · Accepted Answer · 2017-02-19 20:36:18Z

0

Did you try to debug the res.body and what it contains? What is the structure your myapp/users returns? Do you return the structure directly like so:

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

or does it look like this:

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

}

In case of the latest one your this.items = res.body should be: this.items = res.body.result

answered Feb 19, 2017 at 20:36

Yoram de Langen

5,4993 gold badges26 silver badges32 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related