Создание динамически созданных раскрывающихся списков в соответствии со значением в модели Vue из начального раскрывающегося списка

Question

У меня есть раскрывающийся список, который заполняется из массива в моей модели Vue, например:

<!-- First dropdown -->
<select v-model="building">
  <option v-for="building in buildings" v-bind:value="building.id">
      {{ building.name }}
  </option>
</select>
<!-- Entries Input -->
<input v-model="entries" type="number">

После того, как пользователь выберет это раскрывающееся меню и нажмет кнопку, будет создано множество других раскрывающихся списков (сумма зависит от числа, которое пользователь ввел в другое поле ввода):

<!-- Dynamically created dropdowns -->
<div v-for="entry in entries">
  <select>
    <option v-for="building in buildings" :selected="building.id == building">
      {{ building.name }}
    </option>
  </select>
</div>

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

Есть идеи, как это сделать?Я думал, что мой код :selected="building.id == building" будет работать, но, похоже, не работает.

Answer 1

Попробуйте связать свой второй раскрывающийся список с вычисляемым свойством на основе первого следующим образом:

 computed:{
          cpt_building:{
                    get(){
                      return this.building;
                      },
                    set(value){
                     //use your value whatever you want
                      }
                }

шаблон:

  <div v-for="entry in entries">
     <select v-model="cpt_building">
       <option v-for="build in buildings" :selected="build.id == building">
         {{ building.name }}
       </option>
     </select>
   </div>

или вы можете создать другое свойство данных и изменитьэто, наблюдая за первым.

   data(){
        return{
           building:0,
           building2:0,
           ...
            }
          },
    watch:{
         building(val){
              this.building2=val;
               }
           }

шаблон:

  <div v-for="entry in entries">
     <select v-model="building2">
       <option v-for="build in buildings" :selected="build.id == building">
         {{ building.name }}
       </option>
     </select>
   </div>