Vue JS 如何根據傳遞的嵌套 v-for 值將選項設置為選定的？

Question

我的 Vue 項目中的另一個 v-for 內部有一個嵌套的 v-for。 我成功抓取了正確的數據； 但是，我正在嘗試使用選擇下拉列表來填充字段並根據通常在文本字段中正常工作的值自動獲取所選選項。

這是我正在使用的內容：

<tr v-for="review in reviews" v-bind:reviewLoc="review.reviewLocation">
  <td style="vertical-align:middle;">{{review.id}}</td>
  <td><input class="form-control" v-model="review.reviewUser" placeholder="{{review.reviewUser}}"/></td>
  <td><input class="form-control" v-model="review.reviewBody" placeholder="{{review.reviewBody}}"/></td>
  <td>
    <select class="form-control " v-model="reviewSelectedLocationName">
      <option v-for="(location, index) in locations" :value="location.locationName" :selected="location.id == review.reviewLocation" >
        {{location.locationName}}
      </option>
    </select></td>
  <td style="white-space: nowrap; text-align: right;"><button class="btn btn-info" type="button" @click="updateReview(review)"><i class="fa fa-save"></i></button><button class="btn btn-danger ml-1" type="button" @click="deleteReview(review.id)"><i class="fa fa-trash"></i></button></td>
</tr>

具體來說，我的問題與這個循環有關。

 <option v-for="(location, index) in locations" :value="location.locationName" :selected="location.id == review.reviewLocation" >
   {{location.locationName}}
 </option>

如您所見，我的目標是通過從 {{{location.LocationName}}}} 列表中提取並將其值與 {{review.reviewLocation}}} 中的值進行比較來填充以選擇該選項

我認為基於 selected=" 的 locationName 是否等於 reviewLocation 會起作用，但我沒有運氣。

任何幫助將不勝感激，整天都被困在這個簡單的問題上。

Answer 1

我認為問題在於您在<select>標簽上設置了v-model="reviewSelectedLocationName" ，這決定了選擇的選項。 您可以為reviews的每個項目提供一個selectedLocation ，它最初與reviewLocation相同，並添加v-model="review.selectedLocation"代替。