My goal is to automatically fetch all products when the specified URL is loaded:
'/Admin/ProductsAdmin'
Unfortunately, the mounted function is not functioning properly as it fails to load anything upon URL loading. Below is the main.js code snippet:
var app = new Vue({
el: "#app",
data: {
loading: false,
objectIndex: 0,
productModel: {
id: 0,
name: "Product Name",
description: "Product Description",
value: 1.99
},
products: []
},
mounted() {
this.getProducts();
console.log("mounted");
},
methods:
{
getProduct(id) {
this.loading = true;
axios.get('/Admin/ProductsAdmin' + id)
.then(res => {
console.log(res);
this.products = res.data;
})
.catch(err => { console.log(err); })
.then(() => { this.loading = false; });
},
getProducts() {
this.loading = true;
axios.get('/Admin/ProductsAdmin')
.then(res => {
console.log(res);
this.products = res.data;
})
.catch(err => { console.log(err); })
.then(() => { this.loading = false; });
},
createProduct() {
this.loading = true;
axios.post('/Admin/products', this.productModel)
.then(res => {
console.log(res.data);
this.products.push(res.data);
})
.catch(err => { console.log(err); })
.then(() => { this.loading = false; });
},
updateProduct() {
this.loading = true;
axios.put('/Admin/products', this.productModel, {
headers: { 'Content-Type': 'application/json' }
})
.catch(err => { console.log(err); })
.then(() => {
this.loading = false;
});
},
deleteProduct(id,index) {
this.loading = true;
axios.delete('/Admin/products/' + id)
.then(res => {
console.log(res);
this.products.splice(index, 1);
})
.catch(err => { console.log(err); })
.then(() => { this.loading = false; });
},
editProduct(product, index) {
this.objectIndex = index;
this.producModel = {
id: product.id,
name: product.name,
description: product.description,
value: product.value,
};
}
},
computed: {
}
});
Upon refreshing or loading the specific page, the mounted function fails to execute. I am seeking assistance from anyone who can help resolve this issue.