I have implemented a select box in the following manner: JS:
Vue.component("v-select", VueSelect.VueSelect);
new Vue({
el: "#app",
data: {
options: [
{ countryCode: "AU", countryName: "Australia" },
{ countryCode: "CA", countryName: "Canada" },
{ countryCode: "CN", countryName: "China" },
{ countryCode: "DE", countryName: "Germany" },
{ countryCode: "JP", countryName: "Japan" },
{ countryCode: "MX", countryName: "Mexico" },
{ countryCode: "CH", countryName: "Switzerland" },
{ countryCode: "US", countryName: "United States" }
],
selectedCountry = null;
someAnotherModel = null; // model for parent select box. country select box is depends on it.
},
});
Html:
<v-select label="countryName" :options="options" v-model="selectedCountry"></v-select>
In a watcher of another select box, I do the following:
If (this.someAnotherModel == null) {
this.selectedCountry = null;
}
Could you assist me in correcting my code? My main objectives are:
- To clear dynamically selected value and empty the select box, setting the model to null does not reflect the change in the select box.
- I also have a query regarding deselecting an option by clicking on it, as mentioned in the documentation (). I want to disable this behavior and automatically select an option if the options array is not null.
Thank you for your assistance.