时间戳

首页 > 解决方案 > 从初始下拉列表中动态创建的下拉列表匹配 Vue 模型中的值

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

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

<!-- 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"可以工作，但似乎没有。

标签： javascripthtmlvue.jsdynamichtml-select

解决方案

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

 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>

推荐阅读