CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-select
Aligator
Aligator

Reputation: 737

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.

Upvotes: 0

Views: 3328

Answers (3)

Mariano Dupont
Mariano Dupont

Reputation: 1613

You can use:

<v-select :clearable="false" />

as denoted in project's github

Upvotes: 1

SEoF
SEoF

Reputation: 1114

Try adding vee-validate to your project and add the required rule for the field using v-validate="{required:true}".

Upvotes: 0

Roy J
Roy J

Reputation: 43881

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>

Upvotes: 0

Related Questions