Axios Vue.js table is not reflecting response data

Viewed 102

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

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();
Related