Vue 2 Aktualizace Vlastností na Objekt v Poli z Vnořené Komponenty

Velmi dobrá otázka a analýza současného stavu to dlouhodobý problém v Vue ekosystému.

Ano, změnou "typu hodnoty" rekvizity z dítěte je problém, protože to vytváří runtime problémy (rodiče přepsání změn, když re-vykreslen), a tak Vue generuje runtime error, když se to stane...

Změna vlastnictví objekt předán jako rekvizita, je to OK "kód funguje" POV. Bohužel tam jsou některé vlivné lidi ve společenství s názorem (a mnoho lidí, kteří slepě následují), že je to anti-pattern. Nesouhlasím s tím a zvedl své argumenty mnohokrát (například zde). Popsal jsi důvodů velmi dobře - to jen vytváří zbytečné složitosti/boilerplate kódu...

Takže to, co máte co do činění s je opravdu jen linting pravidlo (vue/ne-mutuje-rekvizity). Tam je pokračující problém/diskuse , která nabízí konfigurační možnost, která by měla umožnit, aby zmírnit přísnost pravidlo s mnoha dobrými argumenty, ale je stále velmi malá pozornost od správců (klidně zvýšit hlas, tam taky)

Teď, co můžete udělat, je:

1. Zakázat pravidlo (daleko od dokonalý ale naštěstí díky Vue runtime error, můžete chytit skutečné chyby přiřazení nesprávné přípony případech během vývoje v pohodě)
2. Přijmout realitu a použít zástupná řešení

Řešení - použít globální stav (uložit jako Vuex nebo Pinia)

Poznámka: Pinia je výhodné, protože další verze Vuex budou mít stejné API

Obecná představa je umístit sharedObject v obchodě a používat rekvizity pouze procházet podřízené součásti na ten správný objekt - ve vašem případě Component2 obdrží index, do vrtule a získat právo prvek z obchodu pomocí to.

Obchody jsou skvělé pro sdílení celosvětového státu, ale použití je jen na překonání linting pravidlo je špatné. Také jako výsledek, komponenty jsou spolu do obchodu, tudíž obě znovupoužitelnost trpí a testování je těžší

Řešení - akce

Ano, to je možné vytvořit nepořádek a hodně často používaný kód pouze pomocí události (zvláště pokud jste hnízdo komponenty více než 2 úrovně), ale existují způsoby, jak dělat věci čistší.

Například ve vašem případě Component2 není nutné znát, jak se můžete zpracovat událost, jako je tento

// Component1
<template>
  ...
   <template v-for="elem in sharedObject.arrayElements">
    <template v-for="(elem2, index) in elem.arrayElements">
       <Component2 :input2="elem2" @update="updateElement($event, index)" />
    </template>
  </template>
  ...
</template>

Ve vašem případě, Component2 zpracovává pouze změna jednoho logická vlastnost, takže $event může být jednoduchý boolean. Pokud existuje více než jednu vlastnost, aby se změnil uvnitř Component2, $event může to být objekt, a můžete použít objekt rozšířil syntaxe "zjednodušit" Component2 (pomocí jedné události, místo více - jeden pro každou vlastnost)

// Component2
<template>
  ...
  <input v-model="someText" type="text">
  <q-btn @click="updateInput('isSelected', !input2.isSelected)"></q-btn>
  ...
</template>
<script>
export default {
  props: ['input2'],
  computed: {
    someText: {
      get() { return this.input2.someText },
      set(newVal) { updateInput('someText', newVal) }
    }
  },
  methods: {
    updateInput(propName, newValue) {
      const updated = { ...this.input2 } // make a copy of input2 object
      updated[propName] = newValue  // change selected property

      this.$emit('update', updated) // send updated object to parent
    }
  }
}
</script>

No...raději jsem jen zakázat pravidlo, a nastavit některé jasné konvence pojmenování označuje, že komponenta je zodpovědná za změnu je vstup...

Všimněte si, že existují jiná řešení, jako je použití this.$parent, inject\provide nebo událost, autobusem, ale ty jsou opravdu špatné