【问题标题】:Parent data not updated when using sync in v-for loop在 v-for 循环中使用同步时未更新父数据
【发布时间】: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


    【解决方案1】:

    &lt;Turno v-for="(turno, i) in day.turni" :turno.sync="turno" /&gt; 中的turno 变量是循环中的局部变量

    改用这个:&lt;Turno v-for="(turno, i) in day.turni" :turno.sync="day.turni[i]" /&gt;

    【讨论】:

      猜你喜欢
      • 2016-11-12
      • 2021-02-09
      • 2023-02-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多