如何在 Vue Select 中拒绝“未选择”选项？答案

【问题标题】：How to deny "not selected" option in Vue Select?如何在 Vue Select 中拒绝“未选择”选项？
【发布时间】：2018-08-05 19:22:15
【问题描述】：

我创建了这样的选择框： 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>

在另一个选择框的某个观察者中，我这样做：

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

你能帮我修复我的代码吗？我的目标是：

清除动态选择的值和空选择框，我设置为模型 null 但此更改未反映在选择框中的选择值上
我还有另一个问题，我在文档中寻找它 (http://sagalbot.github.io/vue-select/docs/)，但我没有找到它。如果我单击选定的选项，它将被取消选择并且选择框将被清除。我想拒绝这种行为，并且如果选项数组不为空，还设置为自动选择某个选项。

感谢您的建议。

【问题讨论】：

1) 数据应该是一个返回对象的函数。 2) selectedCountry 和 someOtherModel 不在数据内。
@ThomasKleßen 我会修复它。在这里重写代码是我的错。

标签： javascript vue.js vuejs2 vue-select

【解决方案1】：

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

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

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

至于你的第一个目标，你需要做一个小提琴来证明这个问题。在下面的 sn-p 中，清除建模值会清除选择。我已将其设置为在 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>

【讨论】：

【解决方案2】：

尝试将 vee-validate 添加到您的项目并使用 v-validate="{required:true}" 为字段添加所需的规则。

【讨论】：

【解决方案3】：

你可以使用：

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

如in project's github所表示的

【讨论】：