Как запретить "не выбран" вариант в 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.
  },
});

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
}

Можете ли вы помочь мне исправить мой код, пожалуйста? Мои цели:

1. очистить динамически выбранное значение и пустое поле выбора, я установил нулевое значение модели, но это изменение не отражается на выбранном значении в поле выбора
2. Также у меня есть еще один вопрос, я ищу его в документации ( http://sagalbot.github.io/vue-select/docs/), но я не нашел его. Если я нажму на выбранную опцию, она не будет выбрана, и поле выбора будет снято. Я хочу отрицать это поведение, а также установить для автоматического выбора какой-либо опции, если массив параметров не является нулевым.

Спасибо за совет.

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