VueJs ajout d'une nouvelle clé au problème de référence d'objet

Question

J'ai un problème lors de l'ajout d'une nouvelle clé à un objet, puis de la modification dynamique des champs associés. Par exemple, ajoutez une nouvelle colonne, définissez le nom de la colonne sur "url", puis essayez de mettre à jour la valeur de l'URL pour la ligne 1. Dans mon exemple, la valeur n'est pas mise à jour même si le champ a v-model = " row [field.name] y at-il quelque chose que je dois faire pour vous assurer que la ligne [field.name] est modifiée lorsque field.name change

. code: 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> 

pour votre information, je l'ai essayé à la fois avec v -model et: valeur/@ entrée

Answer 1

Yo vous brisez reactivity. Vous allez casser la réactivité si vous modifiez une propriété qui n'a pas été déclarée lorsque vous montez le composant. Vous essayez de modifier directement les objets d'un tableau qui ont été ajoutés plus tard et Vue ne peut pas le suivre. Pour cette raison, je demande à tous les programmeurs de notre équipe d'utiliser ce $ set chaque fois qu'ils modifient une propriété sur un objet.

Vous pouvez remplacer:

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

avec

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