VueJs한 참조 문제에 새로운 키를 첨가합니다.

VueJs한 참조 문제에 새로운 키를 첨가합니다.

개체에 동적으로 밭 관련된 수정한 새로운 키를 추가하는 것을 나는 문제가 있습니다

예를 들어 새로운 칼럼"url"에 열 이름 설정하면 url의 1값을 업데이트하려고 하면 됩니다.비록 필드 v-model="row[field.name]이 있는 제 예에서 가치는 업데이트되지 않는다.제가 때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-model과:value/ 입력@ 둘 다 노력했다.

당신은 반응도 어기고 있다.만약 여러분이 각 마운트는 선언되지 않은 속성 수정하는 당신은 반응도 끊어질 것이다.당신은 직접 뒤 뷰 그것을 추적하지는 않 수 있는 배열에 있는 개체를 수정하려고 노력하고 있다.이것 때문에, 난 우리 팀에 모든 개발자들이 사용할 것을 요구한다. 때마다 그들이 한 물체 에 속성을 수정하는달러다.

당신은 대체할 수 있습니다.

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

와 함께

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

참조URL:https://stackoverflow.com/questions/46164569/vuejs-adding-new-key-to-object-reference-issue