[Vuejs]-V-if does not toggle element based on model value

by

0👍

The input event is what v-model is using underneath the hood (it’s effectively v-on:input="modelValue = $event.target.value" :value="modelValue"). This means that your input handler is not guaranteed to fire after the implicit v-model handler, so the demo object hasn’t been updated yet when changeCountry is called.

The better way to do this is to use a method based on the demo object:

methods:{
    isStateVisible(countryId : number | undefined) : boolean{
        return (countryId && countryId == 1);
    }
}

now you can remove v-on:input="changeCountry(demo)" and instead do:

<b-form-select v-if="isStateVisible(demo.countryID)" //note the new v-if condition
                    :id="`guest-${demo.personID}-stateID`"
                    v-model="demo.stateID"
                    class="mb-2 mr-sm-0 mb-sm-1"
                    :options="states"
                    value-field="id"
                    text-field="name"
                    :disabled="isOwner(demo.ownerID)"
                    required>

Leave a comment