Vue JS如何根据传递的嵌套v-for值设置选项？

Posted 2023-02-16

【中文标题】Vue JS如何根据传递的嵌套v-for值设置选项？

【英文标题】：Vue JS How to set option as selected based on passed nested v-for value?

【发布时间】：2021-02-17 09:30:41

【问题描述】：

在我的 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 中的值进行比较来填充以选择选项

我认为基于 locationName 是否等于 reviewLocation 的 selected=" 会起作用，但我没有运气。

任何帮助将不胜感激，整天都在这个简单的问题上。

【问题讨论】：

在option 元素上使用selected 属性的想法并不能很好地转化为Vue，相反，v-model 控制基于@987654327 选择哪个options @。如果您需要合并 reviewSelectedLocationName 的值，您应该在另一个区域执行对 v-model 的分配，例如 watcher、mounted 生命周期挂钩，或者在 xhrrequest 合并您的数据之后，或者某些组合全部 3 个。

【参考方案1】：

我认为问题在于您在<select> 标签上设置了v-model="reviewSelectedLocationName"，这决定了选择的选项。您可以为reviews 中的每个项目指定一个selectedLocation，它最初与reviewLocation 相同，然后添加v-model="review.selectedLocation"。