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

Question

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.

Answer 1

您可以使用：

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

如项目的 github所示

Answer 2

添加此 CSS 以禁用清除选择按钮：

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

小部件中似乎没有将其关闭的设置。

至于你的第一个目标，你需要做一个小提琴来证明这个问题。在下面的代码片段中，清除建模值会清除选择。我将它设置为在 5 秒后清除，所以选择一个值并等待。

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>

Answer 3

尝试将 vee-validate 添加到您的项目并使用v-validate="{required:true}".