I am currently working on implementing a feature that allows users to add multiple workers by clicking the "Add worker" button. However, I have encountered an issue where placing the workers array inside the management object prevents this feature from functioning properly. The desired setup is to have the workers array within the management object, but doing so results in an error message stating "cannot read the property push".
<div v-for="(worker, index) in management.workers" :key="index">
<v-container fluid>
<v-layout row wrap>
<v-flex xs12 md6 class="add-col-padding-right info-align">
<v-text-field
label='Name'
v-model="worker.name"
>
</v-text-field>
</v-flex>
<v-flex xs12 md6 class="add-col-padding-left info-align">
<v-text-field
label='Hours of work'
v-model="worker.hours_of_work"
>
</v-text-field>
</v-flex>
</v-layout>
<v-btn class="red-button next-btn" @click="deleteRow(index)">Delete</v-btn>
</v-container>
</div>
<v-btn class="red-button next-btn" @click="addRow">Add Workers</v-btn>
<script>
export default {
data () {
return {
management: {
workers: []
}
}
},
methods: {
addRow() {
this.management.workers.push({
name: '',
hours_of_work: '',
total: ''
})
},
deleteRow(index) {
this.management.workers.splice(index,1)
}
}
}
</script>