How to deny "not selected" option in Vue Select?

I have created select box like this:
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 some watcher of another select box I do this:

if (this.someAnotherModel == null) {
   this.selectedCountry = null; // if parent has not selected value, I nee clear also country select box, but isn't work
}

Can you help me fix my code please? My goals are:

  1. clear dynamically selected value and empty select box, I set to model null but this change is not reflected on selected value in select box
  2. also i have another question, I looking for it in documentation (http://sagalbot.github.io/vue-select/docs/), but I din’t found it. If I click on selected option, it will be unselected and select box will be clear. I want deny this behavior, and also set to select automatically some option if options array is not null.

Thanks in advice.

86 thoughts on “How to deny "not selected" option in Vue Select?”