I am having an issue with a dropdown that is set to v-model="compose.Recipient".
Based on the value of "compose.Recipient", I need another dropdown to appear as shown below:
<div class="form-group" v-if="compose.Recipient==2" title="Select Class">
<select v-model="compose.RecipientID" >
<option v-for="value in a" v-bind:value="value">Class {{value}}</option>
</select>
</div>
<div class="form-group" v-else-if="compose.Recipient==3" title="Select Grade">
<select v-model="compose.RecipientID" >
<option v-for="value in b" v-bind:value="value">Grade {{value}}</option>
</select>
</div>
<div class="form-group" v-else-if="compose.Recipient==4" title="Select Bus">
<select v-model="compose.RecipientID" >
<option v-for="value in c" v-bind:value="value">Bus {{value}}</option>
</select>
</div>
The issue is due to using v-if, it works when I use v-show instead.
Since I am using the same v-model="compose.RecipientID" for all dropdowns, I cannot switch to v-show from v-if.
Any suggestions on how to resolve this?
Thank you in advance.