VueJS 중첩 데이터 모델

Question

저는 VueJS에 비교적 익숙하지 않고 다른 구성 요소 내에서 구성 요소의 속성을 중첩/참조하는 방법을 궁금해하므로 V- 모델 바인딩이 실제로이를 올바르게 업데이트합니다.

설명하기 위해 나는 이런 식으로하려고합니다.

템플릿 :

<table> 
    <tr v-for="field in myFields"> 
     <td class="label">{{field.label}}</td> 
     <td class="user-control"> 
      <input v-model="field.model"> 
     </td> 
    </tr> 
</table> 

구성 요소 :이 예에서

export default { 
    data() { 
     return { 
      myFields: [ 
       { 
        "label": "label", 
        "model": this.propertyOne 
       }, 
       { 
        "label": "label", 
        "model": this.propertyTwo 
       } 
      ], 
      propertyOne: "", 
      propertyTwo: "" 
     } 
    } 
} 

, 나는 처음에 입력에서 propertyOne 및 propertyTwo 값 (예 : 빈 문자열)을 렌더링하는 템플릿을 기대하고 있고 일반적으로 v-model과 같이 입력을 통해 값을 변경하면 해당 값이 업데이트됩니다.

첫 번째 작품은 propertyOne을 "Foo"로 설정하면 처음에는 입력 값으로 사용되지만 후속 변경 사항은 속성을 업데이트하지 않는다는 것을 의미합니다. 10 개 이상의 필드가있는 경우 방대한 정적 템플릿을 작성하는 대신 v-for 훅의 힘을 활용할 수 있도록이 기능을 사용하고 싶습니다.

Answer 1

다음을 수행 할 경우 : "model": this.propertyTwo 이렇게 변경하면 propertyTwo의 모든 변경 사항이 model에 반영되지 않습니다. 이를 위해 몇 가지 옵션을 사용할 수 있습니다.

당신은 watcher를 사용할 수 있으므로 propertyTwo이 변경됩니다 때마다 다음과 같은 코드의 조각을 실행할 수 있습니다 : 당신은 또한 반응 할 것이다, Computed-Properties 또는 method을 사용할 수 있습니다

watch: { 
    // whenever propertyTwo changes, this function will run 
    propertyTwo: function (newProp) { 
    this.myFields[1].model = newProp 
    } 
}, 

연관된 데이터가 변경되면, 그들은 실행할 것이다.