Vue 2 Aggiornare le Proprietà di un Oggetto in un Array Nidificate Componente

Domanda molto buona e l'analisi dello stato attuale di questo annoso problema in Vue ecosistema.

Sì, la modifica del valore "tipo" di scena il bambino è un problema in quanto crea problemi di runtime (genitore sovrascrivere le modifiche quando ri-renderizzato) e quindi Vue genera un errore di runtime quando questo accade...

Modifica di una proprietà dell'oggetto passato come l'elica è OK dal "codice funziona bene" POV. Purtroppo ci sono alcune persone influenti nella comunità con parere (e di molti di coloro che seguono ciecamente di loro) che questo è un anti-pattern. Io non sono d'accordo con che e cresciuto i miei argomenti molte volte (ad esempio qui). Hai descritto i motivi che ben si crea solo inutili complessità/codice standard...

Così che cosa avete a che fare con è in realtà solo un linting regola (vue/no-mutazione-oggetti di scena). C'è in corso un problema/discussione che propone l'opzione di configurazione che dovrebbe consentire di facilitare il rigore della regola, con molti buoni argomenti, ma si ottiene poca attenzione manutentori (sentitevi liberi di alzare la voce anche lì)

Per ora ciò che si può fare è:

1. Disabilitare la regola (lungi dall'essere perfetto, ma per fortuna grazie a una Vue errore di runtime si può prendere il vero non corretto dei casi durante lo sviluppo benissimo)
2. Accettare la realtà e l'utilizzo di soluzioni alternative

Soluzione: usare globale stato (negozio, come Vuex o Pinia)

Nota: Pinia è preferito, come la prossima versione di Vuex avranno le stesse API

Idea generale è quella di posizionare il sharedObject nel conservare e utilizzare oggetti di scena solo per passare il bambino di componenti per l'oggetto giusto nel vostro caso, l' Component2 verrà visualizzato un indice di elica e recuperare il giusto elemento per il negozio utilizza.

I negozi sono grandi per la condivisione globale stato, ma l'utilizzo è solo per superare il linting regola è male. Inoltre, come risultato, i componenti sono accoppiati al negozio, quindi, sia la riutilizzabilità soffre e la prova è più difficile

Soluzione - eventi

Sì, è possibile creare confusione e un sacco di codice standard, utilizzando solo gli eventi (soprattutto se si annidano i componenti più di 2 livelli), ma ci sono modi per rendere le cose più pulito.

Per esempio nel tuo caso Component2 non ha bisogno di conoscere l'indice, come si può gestire l'evento come questo

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

Nel tuo caso, il Component2 gestisce solo il cambiamento di singola proprietà booleana così $event può essere semplice booleano. Se ci sono più di una proprietà da modificare all'interno Component2, $event può essere un oggetto e si può utilizzare l'oggetto di diffusione sintassi per "semplificare" la Component2 (utilizzando un evento, invece di più - uno per ogni proprietà)

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

Beh...io preferisco solo per disabilitare la regola e definire chiaramente le convenzioni di denominazione per indicare che il componente è responsabile per la modifica di ingresso...

Nota che ci sono altre soluzioni come l'utilizzo di this.$parent, inject\provide o event bus, ma quelli sono davvero male