Question

我有一个下拉列表，该下拉列表是从Vue模型中的数组填充的，就像这样：

Calling with: b'test'
Sending: b'test'
Received: b'\x80\x03X\x07\x00\x00\x00HANDLERq\x00.test'

点击一个按钮在用户选择该下拉和，一束其它的下拉列表中的将被创建（量取决于数在另一输入字段中键入的用户）：

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

我需要动态创建的下拉菜单与第一个下拉菜单具有相同的选择。我不能结合经由V模型，因为我需要他们每个人能够在不影响其他的改变它们。

任何想法该怎么做？我以为我的代码 <div v-for="entry in entries"> <select> <option v-for="building in buildings" :selected="building.id == building"> {{ building.name }} </option> </select> </div>可以工作，但似乎没有。

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模型中的值匹配

1 个答案: