Vue 3 élimine la réactivité des accessoires des composants

Question

J'ai le composant EditTransaction et je l'appelle comme ceci :

<edit-transaction
    v-if="editableTransaction.id === transaction.id"
    :key="'transaction'+transaction.id+etcount"
    :class="{'bg-red-300': type === 'expense', 'bg-green-300': type === 'income'}"
    :groups-prop="modelValue"
    :transaction="transaction"
    class="planning-transactions-item px-10 rounded-2xl w-[90%]"
    @close="editableTransaction = {id: null}">
</edit-transaction>

Comme vous pouvez le voir, j'y envoie un objet de transaction. Puisqu'il s'agit d'un éditeur, je ne veux pas que l'objet de transaction soit réactif. Si quelqu'un ferme l'éditeur, je veux l'objet de transaction d'origine et non l'objet de transaction modifié, donc si j'ai raison et que je veux supprimer le proxy, je le mettrai dans l'éditeur :

const form = toRaw(props.transaction)

À l'intérieur du modèle d'éditeur, il y a certains composants d'actifs avec leurs valeurs de modèle V liées à l'objet de formulaire

<div class="flex gap-5 w-full">
    <FormInput id="et-date" v-model="form.due_date" class="et-fields tw-fields w-[150px]"
               placeholder="Date"
               type="date"
               @keyup.enter="saveChanges"></FormInput>
    <FormInput id="et-name" v-model="form.name" class="et-fields tw-fields" placeholder="Name"
               @keyup.enter="saveChanges"></FormInput>
    <FormInput id="et-value" v-model="form.value" class="et-fields tw-fields" mask-thousand
               placeholder="Value"
               @keyup.enter="saveChanges"></FormInput>
</div>

Le problème est que lorsque je change le nom de la transaction, l'objet du formulaire change ainsi que les propriétés de la transaction. Par conséquent, les noms dans les données parent changent également car les propriétés de transaction sont réactives. Qu'est-ce que je fais de mal ou comment puis-je implémenter un objet de formulaire dont les valeurs sont renseignées lors de la création du composant à l'aide des valeurs des accessoires et sans aucun délégué ?

Answer 1

Il est courant d'utiliser des accessoires pour transmettre des valeurs initiales à l'état des composants enfants. Cela signifie que vous avez "copié" la valeur d'un accessoire en local data. Il garantit que les valeurs des accessoires sont protégées contre les changements inattendus : En savoir plus dans la documentation Vue

Voici un exemple très simple montrant la méthode ci-dessus :

/composant-vue-de-votre-enfant/

export default {
  props: ['initialCounter'],
  data() {
    return {
      // counter only uses this.initialCounter as the initial value;
      // it is disconnected from future prop updates.
      counter: this.initialCounter
    }
  }
}

Maintenant, en lisant votre exemple, je vois que vous essayez de mettre à jour certaines données dans le formulaire et que vous ne souhaitez pas modifier les informations initiales à moins d'être confirmé via un bouton ou quelque chose du genre. Le processus pour résoudre ce problème est le suivant :

• Transmettez les données initiales qui peuvent être modifiées par l'utilisateur en tant qu'accessoires.
• Si l'utilisateur a modifié certaines données via des éléments d'entrée, mais n'a pas confirmé ces modifications (via des boutons), laissez les données inchangées (cela signifie que vous n'émettez aucune modification à l'élément parent, gardez la valeur de l'accessoire inchangée)
• Si l'utilisateur modifie certaines données et le confirme, envoyez les données mises à jour au parent (this.$emit) afin qu'il soit informé des modifications.

Answer 2

J'ai donc trouvé deux solutions :

const form = reactive({...props.transaction})

ou

const form = Object.assign({}, props.transaction)

Les deux fonctionnent, lorsque je change la valeur du formulaire, cela ne change pas les accessoires.