how to get data updated data to show up in vue after fetching it

Question

In order to load some data from the server after the page has loaded I have the following script:

<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>

Now when I run this I do get the alert window showing me that it did indeed fetch the data, however, it does not actually manage to update the object in question (product name remains loading data and not success test). If I move the code

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

into the created: function() like so:

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

    this.fetchData();
}

it does actually update the data. So this means that both the code to fetch the data is accurate and the placeholder to update the data is functional, so why is the data not getting updated?

(note that the code to update the data is a placeholder).

Answer 1

in your fetchData function you have used 'this' keyword inside $.ajax() which can confuse compiler to which object you are referring so why not try 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")
                    }]   
                }
            });


        }