简体   繁体   中英

Axios Vue.js table is not reflecting response data

I have a function which I am calling whenever a file is uploaded in order to refresh my table which holds the files.

The response.data is coming back with the correct data but my table is not reflecting it. Any idea what I could do in order to force update my table to show the new entries?

If I refresh the page, the data comes back correct.

function GetFileList(intID) {
    //$("#fileuploadstbl").empty();
         
    var ItemsVue = new Vue({
        el: '#fileUploadContent',
        data: {
            items: []
        },
        mounted: function () {
            var self = this;
    
            axios.get("getUploads.ashx")
                .then(response => {
                    self.items = response.data 
                }, function (err) {
                    console.log('error');
                    console.log(err.status);
                    console.log(err.response.status);
                })
                .catch(err => {
                    console.log('error');
                    console.log(err.status);
                });
        }
    });
    $("#fileUploadContent").show();
}

And this is how I bind my <tr> :

<tr 
    v-for="item in items" class="tddata" 
    v-bind:data-ID="item.ID" 
    v-bind:data-Uploadid="item.Uploadid"
>
    <td>{{item.Filename}}</td>
    <td 
        style="cursor: pointer;text-align:center;"  
        v-on:click="ViewFile(item.Filepath,item.Filename)"
    >
        View File
    </td>
    <td 
        style="cursor: pointer;text-align:center;"  
        v-on:click="DeleteFile(item.ID,item.guid,item.Filepath,item.Filename)"
    >
        View File
    </td>
    <td style="text-align:center;">{{item.UploadedBy}}</td>          
</tr>

It will automatically update for your case. Maybe you can check is your response.data save in your "items". If still cannot, maybe try to use the forceupdate function

this.$forceUpdate();

This works for me

//HTML
<tr v-for="user in users" :key="user.id" v-bind="users_model">


//In your method
axios.get('sample-domain..com').then(response => {
   this.users = response.data.data
   this.users_model++
})

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM