Javascript 使动态创建的下拉列表与Vue模型中初始下拉列表的值匹配

我有一个下拉列表，可以从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">

{{building.name}

用户选择此下拉列表并单击按钮后，将创建一组其他下拉列表（数量取决于用户在另一个输入字段中键入的数字）：

{{building.name}

我需要动态创建的下拉列表具有与第一个下拉列表相同的选择。我不能通过v-model绑定它们，因为我需要它们中的每一个都能够在不影响其他对象的情况下进行更改

---

你知道怎么做吗？我认为我的代码

：selected=“building.id==building”

可以工作，但似乎不行。

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

 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>

  <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>

模板：

  <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>

  <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>

{{building.name}

您正在为数据项和别名使用

构建

。这是一个有用的开始。然而，难道不是所有的下拉列表都会绑定到cpt_building，所以如果其中一个发生了变化，那么它们都会发生变化吗？第二个选择取决于第一个选择，而第一个选择并不正确。这是正确的答案，我只是想理解为什么它会起作用。那我现在就读计算属性。谢谢