VueJs Hinzufügen eines neuen Schlüssels zum Objektreferenzproblem

Question

Ich habe ein Problem, wenn ich einem Objekt einen neuen Schlüssel hinzufüge und dann dynamisch die zugehörigen Felder modifiziere.

Zum Beispiel eine neue Spalte hinzufügen, den Spaltennamen auf "url" setzen und dann versuchen, den Wert der URL für Zeile 1 zu aktualisieren. In meinem Beispiel wird der Wert nicht aktualisiert, obwohl das Feld v-model = " row [field.name] gibt es etwas, was ich tun sollte sicher row [field.name] wird geändert, wenn field.name ändert

-Code zu machen. https://codepen.io/RuttyJ/pen/zdgbPB

<table> 
     <thead> 
      <tr> 
        <template v-for="(field, f) in fields"> 
         <th> 
          <flex-row> 
           <flex-column style="width: 100%;"> 
            <flex>  
             <input type="text" :value="field.name" @input="updateField(f, 'name', $event.target.value)" style="width:100%"> 
            </flex> 
            <flex style="width: 100%;"> 
             <select :value="field.type" @change="updateField(f, 'type', $event.target.value)" 
             style="width:100%"> 
             <option v-for="fieldType in fieldTypeOpts" 
              :value="fieldType.value" 
              :selected="fieldType.value == field.type">{{fieldType.label}}</option> 
             </select> 
            </flex> 
           </flex-column> 
           <flex> 
            <button @click="removeField(f)" 
              style="height:100%;">X</button> 
           </flex> 
          </flex-row> 
         </th> 
        </template> 
        <td> 
         <button @click="newField()">+</button> 
        </td> 
      </tr> 
     </thead> 
     <tbody> 
      <tr v-for="(row, r) in rows"> 
       <td v-for="field in fields"> 
        <template> 
         <template v-if="'checkbox' == field.type"> 
          <input type="checkbox"      
            style="float:right;"   
            v-model="row[field.name]" 
           >  
         </template> 

         <input type="number" 
           v-else-if="'number' == field.type"  
           style="width:100%"        
           :value="row[field.name]"    
           @input="updateRow(r, field.name, $event.target.value)"> 

         <input type="text" style="width:100%"  
           v-else   
           v-model="row[field.name]"> 
          {{field.name}} 
          <pre>{{field}}</pre> 
         <pre>{{row}}</pre> 

        </template> 
       </td> 
       <td><button @click="removeRow(r)">X</button></td> 
      </tr> 
     </tbody> 
     <tfoot> 
      <tr> 
        <td v-for="(field, i) in fields"> 

        </td> 
        <td> 
         <button @click="newRow()">+</button> 
        </td> 
      </tr> 
     </tfoot> 
    </table> 

FYI ich habe versucht, beide mit v -Modell und: Wert/@ Eingabe

Answer 1

Yo Sie brechen reactivity. Sie werden die Reaktivität unterbrechen, wenn Sie eine Eigenschaft ändern, die beim Mounten der Komponente nicht deklariert wurde. Sie versuchen, Objekte in einem Array, das später hinzugefügt wurde, direkt zu ändern, und Vue kann dies nicht verfolgen. Aus diesem Grund benötige ich alle Programmierer in unserem Team, um dieses. $ Set zu verwenden, wenn sie eine Eigenschaft an einem Objekt ändern.

können Sie ersetzen:

this.rows[rowid][fieldName] = value; 

mit

this.$set(this.rows[rowid], fieldName, value)