I have a scenario where I want to hide the dropdown menu for US states if a different country other than the US is selected. The code snippet I am using to achieve this functionality is shown below:
<b-row v-for="demo in demographics" :key="demo.personID">
...
<div class="input-group">
<b-form-select :id="`guest-${demo.personID}-countryID`"
v-model="demo.countryID"
v-on:input="changeCountry(demo)"
class="mb-2 mr-sm-2 mb-sm-1"
:options="countries"
value-field="id"
text-field="name"
:disabled="isOwner(demo.ownerID)"
required>
<template v-slot:first>
<b-form-select-option :value="null" disabled>-- Select Country --</b-form-select-option>
</template>
</b-form-select>
<b-form-select v-if="demo.stateVisible"
: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>
<template v-slot:first>
<b-form-select-option :value="null">-- Select State --</b-form-select-option>
</template>
</b-form-select>
</div>
...
</b-row>
// function to manage state visibility
changeCountry(demo: TourDemographicsModel) {
if (demo.countryID && demo.countryID == 1) {
demo.stateVisible = true;
} else {
demo.stateVisible = false;
}
}
// model interface
export interface TourDemographicsModel {
// ...
countryID?: number
stateID?: number
stateVisible: boolean
}
The current setup successfully hides or shows the state dropdown based on the selected country when the page loads, but it doesn't dynamically adjust visibility when the country selection is changed. Any suggestions on how to address this issue?
Just for your information - I am working with Vue version 2.6 and utilizing TypeScript.