I am facing an issue with updating the DOM using the following logic:
index.vue [Template Part]
<div>
<div v-for="obj in objects" :key="obj.id">
<select v-model="obj.quantity" @change="qtyChange(obj)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div class="w-1/5">
<p class=" pt-4 text-right">${{ getObjectPrice(obj) }}</p>
</div>
</div>
</div>
index.vue [Script Part]
<script>
props['selectedObjs'],
data () {
return {
objects: []
}
},
mounted: {
this.objects = this.selectedObjs
},
methods: {
getObjectPrice(obj)
{
// perform mathematical calculations based on obj.quantity
return answer
},
qtyChange(obj) {
getObjectPrice(obj)
}
}
</script>
I have attempted to watch the objects data property, but it is not working as expected. I need to display the updated price of objects depending on the quantity selected from the dropdown. Any recommendations for a more efficient solution would be greatly appreciated.