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.

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

  1. Add this CSS to disable the clear-selection button:

    .dropdown-toggle .clear {
      display: none;
    }
    

    There does not seem to be a setting to turn it off in the widget.

    As for your first goal, you would need to make a fiddle to demonstrate the problem. In the snippet below, clearing the modeled value clears the selection. I have it set to clear after 5 seconds, so select a value and wait.

    Vue.component("v-select", VueSelect.VueSelect);
    
    const v = 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
      }
    });
    
    setTimeout(() => {
      v.selectedCountry = null;
    }, 5000);
    body {
      font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
      text-rendering: optimizelegibility;
      -moz-osx-font-smoothing: grayscale;
      -moz-text-size-adjust: none;
    }
    
    .dropdown-toggle .clear {
      display: none;
    }
    
    h1,.muted {
      color: #2c3e5099;
    }
    
    h1 {
      font-size: 26px;
      font-weight: 600;
    }
    
    #app {
      max-width: 30em;
      margin: 1em auto;
    }
    <script src="//unpkg.com/vue@latest/dist/vue.js"></script>
    <script src="//unpkg.com/vue-select@latest/dist/vue-select.js"></script>
    <div id="app">
      <h1>Vue Select</h1>
      <v-select label="countryName" :options="options" v-model="selectedCountry"></v-select>
    </div>
    Reply

Leave a Comment