CODEWITHSUNDEEP
javascriptajaxvuejs2
Avib
Avib

Reputation: 73

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

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

example source code

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

Upvotes: 1

Views: 3137

Answers (2)

Avib
Avib

Reputation: 73

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!

Upvotes: 2

Yoram de Langen
Yoram de Langen

Reputation: 5499

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

Upvotes: 0

Related Questions