I am in the process of developing a web application that showcases various products (with product details retrieved from the database). Each product is equipped with a More Details >> button which, upon clicking, triggers the opening of a modal window containing specific information about that particular product. However, I have encountered an issue where the allRecords() function in my JavaScript file is being called multiple times, causing excessive activity in the Network tab during inspection. I aim to optimize this by ensuring that the function is only invoked once. While exploring possible solutions, I came across this resource on triggering Vue methods selectively: How to trigger a vue method only once, not every time. I seek guidance on applying similar principles to address this challenge in my code.
Below is the snippet of my code:
PHP FILE
<div id="myapp">
{{ allRecords() }}
<div class="content">
<div class="nested" v-for="product in products">
...
</div>
<b-modal id="productModal" v-if="chosenProduct" hide-footer="true" ok-title="Buy Now" size="lg" :title="chosenProduct.Name">
<div class = "inner-container">
...
</div>
</b-modal>
</div>
</div>
JS FILE
var app = new Vue({
'el': '#myapp',
data: {
products: "",
chosenProduct: null
},
methods: {
allRecords: function(){ \\ This function here is being called multiple times
axios.get('ajaxfile.php')
.then(function (response) {
app.products = response.data;
})
.catch(function (error) {
console.log(error);
});
},
chooseProduct: function (product) {
app.chosenProduct = product
}
}
})