Question

从标题本身，我遇到了使用动态键创建v模型的问题。创建动态v模型时，它总是以未定义的所有bookingRequiredDetails结尾。

v-model="travellerDetails['traveller_' + traveller][details]"

我想创建类似这样的东西。

 travellerDetails:{ 
                    "traveller_1": {"Full Name":"Jane", "lastName":"Doe"},
                    "traveller_2": {"Full Name":"John", "lastName":"Doe"},
                },

HTML

<div class="col-md-10">
   <div class="form-row">
      <div class="form-group col-md-6" v-for="details in bookingRequiredDetails">
         <label for="required-details">{{ details }}</label>
          <input 
             type="text" 
             class="form-control"
             v-model="travellerDetails['traveller_' + traveller][details]" 
                                            placeholder="Required Details" 
           />
     </div>
   </div>

VUE

data () {
        return {
            travellerDetails: { },
            travellers: 3,
            bookingRequiredDetails: [ 'Full Name', 'Age', 'Gender'],
        };
    },

Answer 1

创建一个TravelerForm组件并将其循环n次（n =旅行者人数）。每个TravelerForm组件都可以有自己的数据。

TravelerForm.vue

<template>
    <div>
        {{ traveler }} // this will display the traveler detail
        <input type="text" id="name" class="form-control" v-model="traveler.name" placeholder="Enter Name" />
        <input type="text" id="gender" class="form-control" v-model="traveler.gender" placeholder="Enter Name" />
        <input type="text" id="age" class="form-control" v-model="traveler.age" placeholder="Enter Name" />
    </div>
</template>
<script>
  export default {
    data () {
      return {
        traveler: {
          name: '',
          gender: '',
          age: 0
        }
      }
    }
  }
</script>

并根据您的主文件中的旅客人数进行循环。

Main.vue

<template>
    <div>
        <template v-for="n in travelers">
            <!-- Pass any props to the child component that you want -->
            <traveler-form />
        </template>
    </div>
</template>
<script>
    import TravelerForm from './TravelerForm.vue/'
    export default {
      data () {
        return {
          travelers: 3
        }
      },
      components: {
        TravelerForm
      }
    }
</script>

动态v-模型作为具有键VueJs的数组对象

1 个答案: