对多个元素使用相同的 v-model

Question

我有一个设置为 v-model="compose.Recipient" 的下拉菜单。

根据“compose.Recipient”，我需要显示另一个下拉列表，如下所示

<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 元素。