I have a task where I need to showcase data from a dynamically updating list in my project. This particular list gets updated within a function, and what I aim for is to only display this data on the webpage after the said function has been executed successfully.
Check out the template code snippet below:
<div class="modal-body">
<td>{{shopName}}</td>
</div>
Here's the associated script:
<script>
export default {
name: "ViewShop",
props:{
shops:Object
},
data(){
return{
shopName:[],
}
},
methods:{
async shopd(sid){
this.shopName=this.shops;
console.log(this.shopName) // This prints the data in the console
}
}
};
</script>
The goal here is to showcase the value of shopName variable in the template post executing the shopd() function properly.
In order to achieve this, it seems that currently, shopName is being accessed in the template prior to the actual execution of the function. Therefore, my focus now lies in making sure it waits until there are definitive changes made by the function with regards to shopName, following which this should reflect in the template seamlessly.