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.