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.

43 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