Вложенная модель данных VueJS

Question

Я относительно новичок в VueJS, и мне интересно, как встраивать/ссылаться на свойства компонента внутри других, так что привязка v-model фактически обновит их правильно.

Чтобы проиллюстрировать, я пытаюсь сделать что-то подобное.

Шаблон:

<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-моделью.

Первые работы, что означает, что если я установил свойствоOne в значение «Foo», он сначала будет использоваться в качестве входного значения, но последующие изменения по-прежнему не обновляют свойства. Мне бы очень хотелось, чтобы это работало, чтобы я мог использовать силу v-for hook вместо того, чтобы записывать массивный статический шаблон, если у меня больше 10 полей.

Answer 1

Когда вы это сделаете: "model": this.propertyTwo это не гарантирует, что все последующие изменения на propertyTwo будут отражены в model. Для этого есть несколько вариантов.

Вы можете использовать watcher, поэтому всякий раз, когда propertyTwo изменится вы можете выполнить фрагмент кода, как следующее:

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

Вы также можете использовать Computed-Properties или method, который будет реактивным, если любые связанные с изменением данных, они будут выполняться.