I want to display data from a list. Data in the list is updating inside a function. Actually I want to display the data only after execution of that function.
Here is my template code.
<div class="modal-body">
<td>{{shopName}}</td>
</div>
And this is my 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>
I want to print the value of shopName in my template after executing the function shopd()
I think the shopName is accessed in template before executing the function. So what I need is it should wait until the function make some changes in shopName and then it should accessed to the template.
If you want to print the shops object as default value for shopName when rendering the component, since it's already a prop, you can simply call it in your shopName variable.
props:{
shops:Object
},
data(){
return{
shopName: this.shops,
}
},
Then, if you want to update the shopName variable's value on the road, you're doing good assigning the new value with your shopd method, but you need a trigger event which is really what you'll be using for binding. For example:
<div class="modal-body">
<td @click="shopd">{{shopName}}</td>
</div>
which is equivalent to
<div class="modal-body">
<td v-on:click="shopd">{{shopName}}</td>
</div>
Last, if you just want to process the shops prop once before assigning the default shopName value, you can simply call the function in shopName variable and return the result
data(){
return{
shopName: this.shopd,
}
},
methods: {
shopd() {
return this.shops
}
}