Vuejs如何為select選項賦值

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

只需使用selectedFields[] 作為 select的 v-model，索引i為 v-for。 您將在 selectedFields 數組中獲得選定的值

<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: []
      };
    }