When a specific option is selected in the first column of the last row, I am dynamically adding a new row to a table that includes selects and inputs.
This functionality can be seen at https://jsfiddle.net/zgykgery/. When 'Service' is selected, a new row is added with the total price calculated based on the service price, default 10% discount, and amount.
The method I currently use to extract the service price seems cumbersome:
:value="item.id+'|'+item.price"
However, it works. Now, I need help figuring out how to loop through all rows, sum up the prices without discounts, calculate the total discount, and then determine the full price including the service price and discount.
I understand I should utilize computed properties or watchers for this task, but I'm unsure how to proceed.
How can I compute the sum of these values within the table and display them in a smaller table below?
Update
As a newcomer to Vue.js, I attempted to achieve this using computed properties, but unfortunately, I was unsuccessful. Below is my attempt:
// Your JavaScript code here // Your CSS code here<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="630c050c040c071dfa030f26340814081419">[email protected]</a>/lib/index.js"></script>
<div id="app">
<template>
// Your HTML code here
</template>
</div>In an updated version of the fiddle found at https://jsfiddle.net/zgykgery/21/, the total price still remains empty after changes are made.