I have the following script to load data from the server after the page loads:
<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>
After running this script, the alert window confirms that the data was fetched successfully. However, the product name does not update to "success test." The code snippet:
this.products = [{ name: 'success' + 'test', imageUrl: require("../../assets/t1.png") }]
is moved inside the created: function() as follows:
created: function () {
this.products = [{
name: 'success' + 'test',
imageUrl: require("../../assets/t1.png")
}]
this.fetchData();
}
and then the data gets updated correctly. The code for fetching data and updating it seems to be correct, so what could be preventing the data from updating as expected?
(Please note that the code for updating the data is a placeholder).