是否可以将动态对象键与 v-model 一起使用？

Question

这是我的数据结构：form: {   email: '',   password: ''}现在我想使用循环并使用对象动态设置模型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>

Answer 1

是的，通过使用对象及其键的引用：

<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>