Блог

У меня есть вложенный v-for внутри другого v-for в моем проекте Vue. Я успешно собираю правильные данные; однако я пытаюсь использовать выпадающий список выбора для заполнения поля и автоматического выбора выбранного параметра на основе значения, которое обычно нормально работает в текстовом поле.

Вот с чем я работаю:

 <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 , но мне не повезло.

Любая помощь будет оценена, застрял на этой простой проблеме весь день.

Я думаю, проблема в том, что вы установили v-model="reviewSelectedLocationName" в своем <select> теге, который определяет, какой вариант выбран. Вы могли бы указать каждый элемент в reviews a selectedLocation , который изначально совпадает с reviewLocation , и добавить v-model="review.selectedLocation" вместо него.