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

Question

I have one dropdown which is set v-model="compose.Recipient".

According to the "compose.Recipient", i need to show-up another drop-down as following

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

It's not working because of v-if, if i use v-show it's working.

I'm using same v-model="compose.RecipientID" to all dropdowns therefore i could not be able to use v-show instead of v-if.

How to solve it?

Advanced Thanks.

Answer 1

Instead of using three different select elements, create a computed that represents the source of the select . That computed function will look at compose.Recipient and return either a , b , or c . Use that computed as the source for the v-for (in a single select ).

This way you're only binding a single item to compose.RecipientID and you don't have to worry about showing/hiding different select elements.