Hinzufügen neuer durch eine Variable zu einem Objekt erzeugten Schlüssel in Vue

Question

ein Projekt mit Vue.js (und Laravel) ist die folgende (stark vereinfacht) Code ergibt die folgenden Fehler:

Vue Komponente:

<template> 
    <input type="text" class="form-control" v-model="main_object[item_id][my_answer_key]"> 
</template> 

<script> 
    export default { 

     props: [ 

     ], 

     data() { 
      return { 
       main_object: {}, 
       item_id: '1234', 
       my_answer_key: '5678' 
      } 
     }, 

     ready: function() { 
      vm = this; 
     }, 

     methods: { 

     } 
    } 

</script> 

Fehler erhalten:

Wir wissen, dass Sie die Methode vm. $ Set() verwenden können, um dem Objekt Eigenschaften hinzuzufügen. Wir erstellen jedoch den Modellpfad im Handumdrehen (item_id und my_answer_key ändern sich je nachdem, welche Benutzeroptionen ausgewählt wurden). Es scheint so, als müssten wir eine Methode schreiben, die festlegt, ob die Objekteigenschaft bereits gesetzt ist, und wenn sie nicht gesetzt ist, um sie dann zu setzen. Gibt es einen besseren Weg, um das oben genannte zu erreichen?

Answer 1

Sie könnten scheinbar dies umgehen, indem mit dem created Haken und $set:

created: function() { 
    this.$set(this.item_id + "." + this.my_answer_key, "") 
} 

Wenn jedoch item_id und my_answer_key kann sich ändern, wird dieser Ansatz letztlich nicht funktioniert, weil Vue nicht dynamische Zweiweg hat Bindung. Mit anderen Worten, die Bindung in Ihrem V-Modell wird einmal erstellt und ändert sich später nicht, wenn sich einer der Werte item_id oder my_answer_key ändert.

Also, um so etwas zu erreichen, müssen Sie möglicherweise zu einem Kludur wie verwenden Sie eine v-if und schalten Sie es um die Eingabe zu zerstören und neu zu erstellen (und es ist bindend). Das könnte funktionieren.

Manchmal können Berechnungen in diesen Situationen helfen. Binden Sie Ihre Eingabe an ein einfaches Attribut in Ihrem Datenmodell und verwenden Sie eine Berechnung, um das tatsächlich verschachtelte Datenmodell zu generieren, das Sie an anderer Stelle benötigen.