更新Vue.js数据

Question

hi I am having some trouble to update the date of vue.js when I cann the function to update this it is "crashing the browser process"

here is the code

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;
        }
    }
});

But when I call this function

app.UpdateData();

the browser get stocked and doesn't work

am I doing this right? How can I update this data that cames from the server site

Answer 1

Seems you at least need to place the method inside beforeMount() hook?

Also, defining a data model for a component is a good practice

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

Answer 2

in the success: portion of your ajax method change that.items to this.items where (as @mannok said) items is defined in your vue instance data property. Also, this.$forceUpdate() is probably unnecessary. Vue will automatically update when data changes (as long as you aren't adding properties to an existing object or array).