更新Vue.js數據

Question

嗨，我無法更新vue.js的日期時，我無法通過函數來​​更新它，這是“崩潰了瀏覽器進程”

這是代碼

var app = "";
app = new Vue({
    methods: {
        selfClick: function (valor) {
            $("#" + valor).click();
        },
        UpdateData: function () {
            var that = this;
            $.ajax({
                url: "/api/json/cte",
                type: "POST",
                dataType: "json",
                data: {
                    Tomador: var_grid_tomador,
                    Pagina: var_grid_pagina,
                    TotalShow: var_grid_toalshow,
                    OrdenarPor: var_grid_ordernarpor,
                    OrdernarAscDes: var_grid_AscDes,
                    Empresa: var_gird_empresa,
                },
                success: function (rt) {
                    console.log(rt);
                    that.items = rt.Data;
                    $(".loading").hide();
                    $("#maxShow").val(rt.MaxShow);
                    $("#GridTTRows").html("Total de itens: " + rt.TotalItens);
                    footernizer(rt.AllPages, rt.CurrentPage);
                    console.log(rt);
                    $("tobdy .odd").hide();

                },
                error: function (rt) {
                    toastShow("toast-error", "Houve um erro, verifique sua conexão");
                    console.log(rt.responsetext);
                    $(".loading").hide();
                },
            })
            this.$forceUpdate();
        }
    },
    filters: {
        formatDate: function (value) {
            if (!value) return ''
            var data = value.split("T");
            data = data[0].split("-");
            return data[2] + "/" + data[1] + "/" + data[0];
        },
        formatDateTime: function (value) {
            if (!value) return ''
            var data = value.split("T");
            var date = data[0].split("-");
            var times = data[1].split(":");
            return date[2] + "/" + date[1] + "/" + date[0] + " " + times[0] + ":" + times[1];
        },
        brl: function (value) {
            if (!value) return ''
            var numero = value.toFixed(2).split('.');
            numero[0] = "" + numero[0].split(/(?=(?:...)*$)/).join('.');
            return numero.join(',');
        }
    },

    el: '#app',
    created: function () {
        this.UpdateData();

    },

    computed: {
        // Propriedade customizada utilizada como filtro dinâmico
        filteredData: function () {
            var articles_array = this.items,
                searchString = this.searchString;

            if (!searchString) {
                return articles_array;
            }

            searchString = searchString.trim().toLowerCase();

            articles_array = articles_array.filter(function (item) {
                if (item.destinatario.toLowerCase().indexOf(searchString) !== -1) {
                    return item;
                }
            })

            // Return an array with the filtered data.
            return articles_array;
        }
    }
});

但是當我調用這個函數

app.UpdateData();

瀏覽器存貨不足，無法正常工作

我這樣做對嗎？ 如何更新來自服務器站點的數據

Answer 1

似乎您至少需要將方法放在beforeMount（）掛鈎中？

同樣，為組件定義數據模型也是一種好習慣

// methods: {...},
data(){
    return {
        items: null
    }
},
// mounted: {...}

Answer 2

success: ajax方法的that.items將this.items更改為this.items ，其中（如@mannok所說）在vue實例數據屬性中定義了項。 另外， this.$forceUpdate()可能是不必要的。 Vue將在數據更改時自動更新（只要您不向現有對象或數組添加屬性）。