如何在 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中所示