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

知道怎么做吗？我认为我的代码 :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>

使动态创建的下拉菜单与初始下拉菜单中的 Vue 模型中的值匹配

Making dynamically created dropdowns match value in Vue model from initial dropdown

html

javascript

html-select

dynamic

vue.js