简体   繁体   English

Axios Vue.js 表未反映响应数据

[英]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.我有一个 function 每当上传文件时我都会调用它来刷新我保存文件的表。

The response.data is coming back with the correct data but my table is not reflecting it. response.data返回正确的数据,但我的表没有反映它。 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>的方式:

<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".也许你可以检查你的 response.data 是否保存在你的“项目”中。 If still cannot, maybe try to use the forceupdate function如果还是不行,也许可以尝试使用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++
})

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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