Question

我有一个下拉列表，设置为v-model =＆＃34; compose.Recipient＆＃34;。

根据＆＃34; compose.Recipient＆＃34;，我需要显示另一个下拉列表

<div class="form-group" v-if="compose.Recipient==2" title="<?=$this->lang->line('SELECTCLASS')?>">
      <select v-model="compose.RecipientID" >
           <option v-for="value in a" v-bind:value="value"><?=$this->lang->line('CLASS')?> {{value}}</option>
      </select>
</div>
<div class="form-group" v-else-if="compose.Recipient==3" title="<?=$this->lang->line('SELECTGRADE')?>">
      <select v-model="compose.RecipientID" >
           <option v-for="value in b" v-bind:value="value"><?=$this->lang->line('GRADE')?> {{value}}</option>
      </select>
</div>
<div class="form-group" v-else-if="compose.Recipient==4" title="<?=$this->lang->line('SELECTBUS')?>">
      <select v-model="compose.RecipientID" >
           <option v-for="value in c" v-bind:value="value"><?=$this->lang->line('BUS')?> {{value}}</option>
      </select>
</div>

因为v-if而无法正常工作，如果我使用v-show它正在工作。

我对所有下拉列表使用相同的v-model="compose.RecipientID"因此我无法使用v-show而不是v-if。

如何解决？

高级谢谢。

Answer 1

创建一个代表select来源的computed，而不是使用三个不同的select元素。该计算函数将查看compose.Recipient并返回a，b或c。使用计算的v-for作为源select。

这样您只需将单个项目绑定到compose.RecipientID，您就不必担心显示/隐藏不同的select元素。

将相同的v模型用于多个元素

1 个答案: