在vue中向hash内的数组添加值不起作用

Question

单击add worker时，我正在尝试添加添加多个worker的功能。我在这里面临的问题是，当我把workers数组放在管理层中时，这个功能就不起作用了。但如果将workers数组放在管理散列之外，那么它就起作用了。但我希望它在管理问题内部。我收到错误无法读取属性推送。

<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>

Answer 1

代码似乎在下面工作：

new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
return {
management: {
workers: []
}
}
},
methods: {
addRow() {
this.management.workers.push({
name: '',
hours_of_work: '',
total: ''
})
},
deleteRow(index) {
this.management.workers.splice(index, 1)
},
getRows(){
console.clear()
console.log(this.management.workers)
}
}
});

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.20/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.20/dist/vuetify.min.js"></script>
<div id="app">
<v-app>
<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>
<v-btn class="red-button next-btn" @click="getRows">View Workers</v-btn>
</v-app>
</div>