javascript - 动态 v-model 作为带有键 VueJs 的数组对象

Question

从标题本身来看，我在创建带有动态键的 v 模型时遇到了问题。在创建动态 v-model 时，它总是以未定义的所有 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'],
        };
    },  

标签： javascriptvue.jsvuejs2v-model