【发布时间】:2021-06-29 21:31:22
【问题描述】:
我构建了一个名为 Turno 的组件(轮班)。我有某种日历,每天我都有更多Turno 的实例。
如果我为自己预订班次,那么我需要在班次中添加我的名字,但反应性似乎不起作用,父对象(所有班次)不会更新。我还在属性中添加了.sync。
班次模板:
<div v-for="mansione in turno.mansioni">
<v-row class="ma-0 pa-0 align-end">
<v-col class="ma-0 pa-0" cols="8">
<div class="caption font-weight-bold nome_mansione">{{ mansione.nome.toLowerCase() }}
<span class="caption">(Min. {{ mansione.min }})</span>
</div>
</v-col>
<v-col class="ma-0 pa-0 text-right" cols="4">
<div class="caption font-weight-bold nome_mansione">
<pulsante-generico :small="true" icon="mdi-account-plus" color="orange" @click="aggiungiPersona(turno,mansione)"/>
</div>
</v-col>
</v-row>
<hr class="mt-0">
<div v-for="milite in mansione.militi" class="ma-2" style="line-height: 0.8rem">
{{ milite.cognome }} {{ milite.nome }}
</div>
</div>
换班后(这应该做出反应?在这之后没有任何变化,父对象不受影响):
turniService.prenotaTurno(prenotazione).then(d => {
this.$emit("update:turno", d || this.turno)
this.close()
})
移位组件中的道具:
props: {
turno: {
type: Object,
default: () => {
return {
dataInizio: null,
dataFine: null,
id: 0,
tipo: "",
mansioni: []
}
}
}
},
在父级中,我像这样渲染班次:
<v-col v-for="day in dati.giorni">
<DatiGiornoCalendario :day="day.giorno"/>
<Turno v-for="(turno, i) in day.turni"
:turno.sync="turno"
/>
</v-col>
【问题讨论】:
标签: vue.js vue-component vuetify.js vue-reactivity