I have a specific requirement in my Vue application where I need to extract values from an XLS file and assign them to options within a select dropdown. Here is what I currently have:
<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: []
};
}
My goal is to dynamically assign the select options based on the headers extracted from the XLS file and then send this data to the backend. However, I'm unsure of how to proceed with this implementation. Any suggestions or guidance would be greatly appreciated!