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

在ajax方法的Device部分中的

中，将success:更改为that.items，其中（如@mannok所说）项在您的vue实例数据属性中定义。另外，this.items可能是不必要的。数据更改时，只要不向现有对象或数组添加属性，Vue都会自动更新。

更新Vue.js数据

2 个答案: