Параметры выбора vue в зависимости от условия

У меня есть следующий шаблон для раскрывающегося списка:

<select v-model="selectedClient" class="stat-select text-u-c">
  <option disabled value="">Please select a Client</option>
  <option>{{}}</option>
</select>

... и у меня есть кнопка-обработчик click, которую я хочу заполнить <option> на основе некоторого условия:

if (Department == 'IT') {
  // select option values should be A,B,C
} else (Department == 'Finance') {
  // select option values should be X,Y,Z
}

Как я могу этого добиться?

0
0
1 383
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы бы использовали Vue синтаксис отображения списка с v-for:

<ELEMENT v-for="VARIABLE in ARRAY" :key="ITERATOR_ID">

В вашем случае с <option> у вас будет что-то вроде этого:

<option v-for="item in options" :key="item.id">{{item.label}}</option>

... где options - это свойство данных, содержащее такой массив:

[
  { id: 1, label: 'A' },
  { id: 2, label: 'B' },
  { id: 3, label: 'C' },
]

Если вам нужен другой набор <option> на основе Department, вы можете установить this.options на другой массив соответственно, и привязка данных автоматически обновит <option>:

methods: {
  getOptions() {
    const dept = this.Department;
    if (dept === 'IT') {
      this.options = [
        { id: 1, label: 'A' },
        { id: 2, label: 'B' },
        { id: 3, label: 'C' },
      ];
    } else if (dept === 'Finance') {
      this.options = [
        { id: 4, label: 'X' },
        { id: 5, label: 'Y' },
        { id: 6, label: 'Z' },
      ];
    }
  }
}

new Vue({
  el: '#app',
  data: () => ({
    options: null,
    Department: null,
    selectedClient: null,
  }),
  methods: {
    getOptions() {
      this.selectedClient = null;
      if (this.Department === 'IT') {
        this.options = [
          { id: 1, label: 'A' },
          { id: 2, label: 'B' },
          { id: 3, label: 'C' },
        ];
      } else if (this.Department === 'Finance') {
        this.options = [
          { id: 4, label: 'X' },
          { id: 5, label: 'Y' },
          { id: 6, label: 'Z' },
        ];
      }
    }
  },
})
<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">
  <div>
    <span>Department:</span>
    <input id="dept" type="radio" v-model="Department" value="IT">
    <label for="dept">IT</label>
    <input id="fin" type="radio" v-model="Department" value="Finance">
    <label for="fin">Finance</label>
    <button @click="getOptions">Get options</button>
  </div>

  <select v-model="selectedClient"  class="stat-select text-u-c">
    <option disabled value="">Please select a Client</option>
    <option v-for="item in options" :key="item.id">{{item.label}}</option>
  </select>
  
  {{selectedClient}}
</div>

@kevin Без проблем :)

tony19 26.10.2018 05:29

Другие вопросы по теме