javascript - 使动态创建的下拉菜单与初始下拉菜单中的 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-model 绑定(bind)它们，因为我需要它们中的每一个都能够在不影响其他的情况下进行更改。

知道怎么做吗？我认为我的代码 :selected="building.id == building" 会起作用，但它似乎不起作用。

Answer 1

尝试将第二个下拉列表绑定(bind)到基于第一个下拉列表的计算属性，如下所示:

 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>