Question

为了在页面加载后从服务器加载一些数据，我有以下脚本：

<script>    
    export default {    
        data() {
            return {
                imageDirectory: "../../images/",
                fileName: "img",
                extension: ".png",

                products:
                [
                   {
                      name: 'loading data',
                      imageUrl: require("../../assets/t1.png")
                   } 
                ]

            }
        },
        name: "ProductList",

        created: function () {

            this.fetchData();
        },
        methods: {
            fetchData: function () {
                $.ajax({
                    type: "GET",
                    timeout: 1200000,
                    url: 'api/test',
                    contentType: "application/json",
                    dataType: "text",
                    success: function (data) {
                        window.alert(data);

                        this.products = [{
                            name: 'success' + 'test',
                            imageUrl: require("../../assets/t1.png")
                        }]                    },
                    error: function (data) {

                        this.products = [{
                            name: 'failed' + 'test',
                            imageUrl: require("../../assets/t1.png")
                        }]   
                    }
                });


            }
        }

    }
</script>

现在，当我运行此命令时，我确实得到了一个警告窗口，向我显示它确实确实在获取数据，但是，它实际上并没有设法更新有问题的对象（产品名称仍在加载数据而不是成功测试）。如果我移动代码

this.products = [{ 名称：“成功” +“测试”， imageUrl：require（“ ../../ assets / t1.png”） }]

像这样进入created: function()：

created: function () {
    this.products = [{
        name: 'success' + 'test',
        imageUrl: require("../../assets/t1.png")
    }] 

    this.fetchData();
}

它实际上会更新数据。因此，这意味着获取数据的代码是准确的，并且用于更新数据的占位符都起作用，那么为什么数据没有得到更新？

（请注意，用于更新数据的代码是一个占位符）。

Answer 1

在fetchData函数中，您已经在$ .ajax（）中使用了'this'关键字，这可能会使编译器混淆您要引用的对象，所以为什么不尝试这样做：

   fetchData: function () {
           let app = this;
            $.ajax({
                type: "GET",
                timeout: 1200000,
                url: 'api/test',
                contentType: "application/json",
                dataType: "text",
                success: function (data) {
                    window.alert(data);

                    app.products = [{
                        name: 'success' + 'test',
                        imageUrl: require("../../assets/t1.png")
                    }]                    },
                error: function (data) {

                    app.products = [{
                        name: 'failed' + 'test',
                        imageUrl: require("../../assets/t1.png")
                    }]   
                }
            });


        }

在获取数据后如何获取更新后的数据以显示在vue中

1 个答案: