时间戳

首页 > 解决方案 > 在 Vue.JS 中加载（创建）页面时如何重新加载从服务器获取的数据

vue.js - 在 Vue.JS 中加载（创建）页面时如何重新加载从服务器获取的数据

问题描述

页面加载时，从服务器获取一些数据并显示在此表上

                            <tr v-for="option in options">
                                <td>
                                    <img :src="'/uploads/'+option.logo" class="img-thumbnail" width="130" height="90" />
                                </td>
                                <td>{{option.description}}</td>
                                <td v-if="option.homologated== false">
                                    <button type="button" class="btn btn-success" v-on:click="homologate(option.idOption)">Homologate</button>
                                </td>
                                <td v-else>
                                    <button type="button" class="btn btn-danger">Cancel</button>
                                </td>
                            </tr>

我正在使用这段代码来获取数据

    var app = new Vue({
    el: '#app',
    data() {
        return {
            options:[]
        }
    },
    created: function () {
        this.list();
    },
    methods: {
        list: function () {
            axios.get('@Url.Action("GetOptions", new {id = ViewContext.RouteData.Values["id"] })')
            .then(response => {
                this.options = response.data
            })
            .catch(function (error) {
                Swal.fire({
                    icon: 'error',
                    title: 'Erro',
                    text: 'Error'
                })
            })
        },
        homologate: function (id) {

            var formData = new FormData();
            formData.set('id', id);

             axios.post('@Url.Action("Homologate")', formData)
                .then(response => {
                    console.log(response);
                })
                .catch(error => { });
            this.list();
        }
    },
})

问题是当我调用 this.list() 方法来刷新我的表时，什么也没有发生，我需要按 F5 重新加载。这可能是因为没有观察或计算方法吗？我是 Vue.JS 的新手，我尝试在手表上插入 list() 方法，但仍然没有成功。

标签： vue.jsasp.net-core

解决方案

问题是我在哪里调用 list() 方法。

homologate: function (id) {

        var formData = new FormData();
        formData.set('id', id);

         axios.post('@Url.Action("Homologate")', formData)
            .then(response => {
   //THIS IS WHERE I NEEDED TO CALL  this.list();
            })
            .catch(error => { });

    }

推荐阅读