Question

我想从标题本身中填充一个动态创建的输入框，该输入框将在页面加载时通过AJAX加载。

<div class="col-md-10" id="app">
   <div class="form-row" v-for="i in travellers"> 
      <div class="form-group col-md-6" v-for="(details, index) in bookingRequiredDetails">
         <label for="required-details">{{ details }}</label>
          <input 
             type="text" 
             class="form-control"
             @input="prop('traveller_' + i, details, $event)"
             placeholder="Required Details" 
           />
     </div>
   </div>
</div>


data () {
   return {
      bookingForm: {
                ...
                bookingRequiredDetails: ''
            },
      travellerDetails: {},
   }
},
load: function () {
      ... where the data variable has value upon page load

      vm.bookingForm.bookingRequiredDetails = data.bookingRequiredDetails;
      if (data.travellerDetails) {
           vm.travellerDetails = data.travellerDetails;
      }
}

已加载数据：

生成的输入框将取决于所需的详细信息。因此，在本例中，将生成3个输入框。

bookingRequiredDetails: Array(1)
  0: Array(3)
      0: "Full Name"
      1: "Age"
      2: "Gender"

travellerDetails: Array(1)
    0:
      traveller_1: Object
          Age: "12"
          Full Name: "Jane"
          Gender: "M"
    1: ...
    2: ...

样本输出：

我想要的是用从服务器加载到其各自输入框的数据填充现有travellerDetails对象。但是，如屏幕截图所示，我无法将正确的数据与输入框的各自键值对配对。

任何想法将不胜感激。

Answer 1

所以我设法解决了。通过添加v-model。

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

div class="col-md-10" id="app">
   <div class="form-row" v-for="i in travellers"> 
      <div class="form-group col-md-6" v-for="(details, index) in bookingRequiredDetails">
         <label for="required-details">{{ details }}</label>
          <input 
             type="text" 
             class="form-control"
             v-model="travellerDetails['traveller_' + i][details]"
             @input="prop('traveller_' + i, details, $event)"
             placeholder="Required Details" 
           />
     </div>
   </div>
</div>

使用现有数据VueJ填充动态输入框

1 个答案: