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

Question

我已经创建了这样的选择框：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.
  },
});

网址：

<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
}

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

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

谢谢指教。

Answer 1

添加此 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 2

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

Answer 3

您可以使用：

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

如项目的github中所示