Vuejs如何为选择选项赋值

Question

在我的vue-应用程序中，我想将xls-文件中的一些值分配给select中的一些选项。

<tr v-for="header in fileHeaders" :key="header">
<td>{{header}}</td>
<td>
<select class="form-control" v-model="selectedField" v-on:change="setField">
<option selected>Choose option</option>
<option value="company_name">Company name</option>
<option value="address">Address</option>
<option value="zipcode">Zipcode</option>
<option value="city">City</option>
<option value="email">Email</option>
<option value="number">Phonenumber</option>
<option value="contact_person">Contact person</option>
<option value="cvr_number">ID</option>
</select>
</td>
</tr>
data() {
return {
fileHeaders: ['Company Name', 'Zipcode', 'City' etc.],
selectedField: "",
chosenFields: []
};
}

所以对于每个{{header}}，我想从select中分配一个特定的选项，然后我想用分配的值将数组推送到后端，但我真的不知道如何实现，也不知道从哪里开始。。。

有什么想法吗？

Answer 1

只需使用chosenFields[]作为select的v-模型，v-for的索引为i。您将在chosenFields数组中获得选定的值

<tr v-for="(header,i) in fileHeaders" :key="header">
<td>{{header}}</td>
<td>
<select class="form-control" v-model="chosenFields[i]" v-on:change="setField">
<option selected>Choose option</option>
<option value="company_name">Company name</option>
<option value="address">Address</option>
<option value="zipcode">Zipcode</option>
<option value="city">City</option>
<option value="email">Email</option>
<option value="number">Phonenumber</option>
<option value="contact_person">Contact person</option>
<option value="cvr_number">ID</option>
</select>
</td>
</tr>

data() {
return {
fileHeaders: ['Company Name', 'Zipcode', 'City' etc.],
selectedField: "",
chosenFields: []
};
}