My goal is to create a jobcard for a vehicle with works. I want to display the total amount by adding up the painting charge and denting charge inputs to the estimated amount input for each indexed item. This means that when I click the Add item button, it should populate with four input values: Description, Painting Charge, Denting Charge, EST Amount.
Vuejs Code
<template>
<div>
<form v-on:submit.prevent="save">
<h3 class="text-center py-2 font-weight-bold"><template v-if="edit_id">Edit</template><template v-else>Add</template> Jobcard</h3>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label>Chasis No:</label>
<input type="text" v-model="jobcard.chasis_no" class="form-control" required placeholder="Chasis No">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Model:</label>
<select class="form-control" v-model="jobcard.model" required>
<option value="">Select a Model</option>
<option v-for="model in models" :value="model.name">{{ model.name }}</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Color:</label>
<select class="form-control" v-model="jobcard.color" required>
<option value="">Color</option>
<option v-for="color in colors" :value="color.name">{{ color.name }}</option>
</select>
</div>
</div>
</div>
<!-- Rest of the form structure goes here -->
</form>
</div>
</template>
<script>
export default {
props:['edit_id','models','variants','colors','supervisors','technicians','types'],
created(){
if(this.edit_id)
{
this.edit()
}
else
this.add_item();
},
data () {
return {
// Data properties go here
}
},
methods : {
// Methods go here
},
computed: {
// Computed properties go here
},
}
</script>
<style lang="css" scoped>
</style>