how i can hide and show divs onchange in vue?

Issue

I want to hide or show when select value is changed .

Here is select

 <ion-item>
          <ion-label>Select Role</ion-label>
          <ion-select
            v-model="role"
            
            ok-text="OK"
            cancel-text="Dismiss"
          >
            <ion-select-option value="1">Agent</ion-select-option>
            <ion-select-option value="2">Ranch</ion-select-option>
            <ion-select-option value="3">Worker</ion-select-option>
            <ion-select-option value="4">Right Hand Man</ion-select-option>
            <ion-select-option value="5">Independent Contractor</ion-select-option>
            <ion-select-option value="6">Packaging Company</ion-select-option>
            <ion-select-option value="7">Cutting Company</ion-select-option>
            <ion-select-option value="8">Supervisor</ion-select-option>
            <ion-select-option value="9">Boss</ion-select-option>
            <ion-select-option value="10">Truck</ion-select-option>
          </ion-select>
        </ion-item>

Here is divs

<div v-if="role==2">
</div>

I tried to watch this property but still it is not working

 watch:
    {
    
  role:function(value) {
  
      this.role = value;
       
      console.log(this.role);
    
      }
    }

Solution

try to set with colon

<ion-select-option :value="1">Agent</ion-select-option>

instead of

<ion-select-option value="1">Agent</ion-select-option>

Answered By - Alan Tishin