VueJs向对象引用问题添加新密钥

Question

将新键添加到对象，然后动态修改关联的字段时遇到问题。

例如，添加一个新列，将列名设置为“ url”，然后尝试更新第1行的url值。在我的示例中，即使该字段具有v-model =“ row [field”，该值也不会实际更新。我应该做些什么来确保在更改field.name时更改row [field.name]

代码：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>

仅供参考，我尝试了v模型和：value / @ input

Answer 1

您正在打破反应性。如果您修改了在安装组件时未声明的属性，则会破坏反应性。您正在尝试直接修改稍后添加的数组中的对象，而Vue无法跟踪该对象。因此，我要求团队中的所有程序员在修改对象的属性时都必须使用this。$ set。

您可以替换：

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

与

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