Можно ли использовать объектный ключ Dynami c с V-моделью? - PullRequest
Новая
       34

Можно ли использовать объектный ключ Dynami c с V-моделью?

1 голос
/ 15 марта 2020

Это моя структура данных: 

form: {
   email: '',
   password: ''
}

Теперь я хочу использовать al oop и динамически задавать модель с помощью объекта form. 

<div class="my-1" v-for="(value,name, index) in form">
   <p class="capitalize"> {{ value }} </p>
   <!--<custom-input :value="value"></custom-input>-->
   <t-input v-model="dynamickmodel" class="w-full"/>
</div>

1 Ответ

1 голос
/ 15 марта 2020

Да, используя ссылку на объект и его ключ: 

<t-input v-model="form[name]" class="w-full"/>

При изменении значения t-input необходимо обновить значение для этого ключа.

Демонстрация: 

new Vue({
  el: "#app",
  data() {
    return {
      form: {
        email: '',
        password: ''
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="my-1" v-for="(value, name, index) in form">
    <p class="capitalize"> {{ value }} </p>
    <input v-model="form[name]" class="w-full"/>
  </div>
</div>
...