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

【问题标题】：how to get data updated data to show up in vue after fetching it获取数据后如何获取数据更新数据以显示在vue中
【发布时间】：2018-10-01 09:37:29
【问题描述】：

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

<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: 要求("../../assets/t1.png") }]

像这样进入created: function()：

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

    this.fetchData();
}

它确实会更新数据。所以这意味着获取数据的代码是准确的，并且更新数据的占位符是有效的，那么为什么数据没有得到更新呢？

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

【问题讨论】：

尝试在成功回调中使用箭头函数。
你是在使用 Vuex 还是只是在没有状态管理的情况下设置它？

标签： javascript vue.js

【解决方案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")
                    }]   
                }
            });


        }

【讨论】：