Vue 2 Aktualizácia Vlastnosti na Objekt v Pole z Vnorený Komponent

Veľmi dobrá otázka a analýza súčasného stavu to dlhodobý problém v Vue ekosystému.

Áno, úprava "hodnota typu" rekvizity od dieťaťa je problém, ako ho vytvorí runtime otázky (rodič prepis zmeny, keď sa opätovne stala), a tak Vue generuje chyba v režime runtime keď sa to stane...

Zmena majetku objektu prešiel ako prop je OK od "kód funguje" POV. Bohužiaľ, tam sú niektoré vplyvné osoby v spoločenstve s názoru (a mnohí, ktorí slepo nasledovať ich), že je to anti-vzor. Nesúhlasím s tým a zdvihol moje argumenty počet krát (napríklad tu). Ste popísané dôvody, veľmi dobre - je to len vytvára zbytočnú zložitosť/štandardný kód...

Tak, čo máte čo do činenia s je naozaj len linting pravidlo (vue/č-mutating-rekvizity). Tam je to pretrvávajúci problém/diskusie , ktoré navrhuje možnosť konfigurácie, ktoré by sa malo umožniť, uľahčiť prísnosť pravidla s mnohými dobré argumenty, ale dostane veľmi malá pozornosť od skutočných správcov (pokojne zvýšiť svoj hlas tam príliš)

Pre teraz, čo môžete urobiť, je:

1. Vypnúť pravidlo (zďaleka dokonalá, ale našťastie vďaka Vue runtime chyba, ktorú môžete chytiť skutočnú nesprávne prípadoch počas vývoja v pohode)
2. Akceptovať realitu a použitie postupov

Riešenie - použiť globálne štátu (uložiť ako Vuex alebo Pinia)

Poznámka: Pinia sa uprednostňuje ako ďalšia verzia Vuex bude mať rovnaké API

Základná myšlienka je, aby miesto sharedObject v obchode a používať rekvizity iba na navigáciu dieťa komponenty na pravej objekt - v prípade Component2 dostane index podľa prop a vybrať správny prvok z obchodu pomocou it.

Obchody sú skvelé pre zdieľanie globálny štát, ale používa sa len na prekonanie linting pravidlo je zlé. Tiež výsledkom je, že komponenty sú spolu do obchodu, teda obe opätovnú využiteľnosť trpí a testovanie je ťažšie

Riešenie - udalosti

Áno, to je možné vytvoriť neporiadok a veľa štandardný kód pomocou iba udalosti (najmä ak ste hniezdo komponenty viac ako 2 úrovne), ale existujú spôsoby, ako robiť veci, ktoré sú čistejšie.

Napríklad vo vašom prípade Component2 nemusí vedieť, index ako môžete zvládnuť prípade, ako 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>

Vo vašom prípade, Component2 rukoväte zmeniť len jedného boolean majetok, takže $event môžu byť jednoduché, boolean. Ak existuje viac ako jednu vlastnosť, ktorú chcete zmeniť vnútri Component2, $event môže byť objekt a môžete použiť objekt šíriť syntax "zjednodušiť" na Component2 (pomocou jedného udalosť, namiesto toho, viac - jeden pre každú vlastnosť)

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

Dobre...ja radšej len vypnúť pravidlo a nastaviť niektoré jasné konvencie pomenovania na označenie, že komponent je zodpovedný za zmenu je vstup...

Upozorňujeme, že existujú aj iné spôsoby, ako pomocou this.$parent, inject\provide alebo udalosť autobus, ale tie sú naozaj zlé