Как вы используете селекторы в Vue?

Question

У меня есть пара элементов select на моей странице, и я хочу получить список значений всех выбранных на странице определенного класса

<select class="selectedCam" @change="dosomething" >
    <option value="" disabled selected>select from below</option>
    <option value="1">Direction 1</option>
    <option value="2">Direction 2</option>
   ....
</select >

Если значение выбрано из одного выбора в моем элементе, я хочу отключить его во всех остальных выборках в моем элементе, которые имеют тот же класс. Этот список будет динамическим в зависимости от того, сколько кулачков подключено к моей системе в данный момент, поэтому я не буду знать, сколько их генерируется в любой момент времени.

Я знаю, что не должен манипулировать Dom с помощью JQuery при использовании vuejs.

Но я знаю, что с JQuery я мог бы найти $('. selectedCam') и получить массив объектов, которые совместно использовали этот класс, и найти текущие значения для этих элементов, которые я мог бы использовать в своем событии onChange, чтобы отключить эти опции в других выборках один раз. Избранный.

Есть ли что-то похожее в Vue Js? Или я должен попробовать другой подход в Vue Js, чтобы отключить эти опции в других выборках, которые генерируются на странице?

Answer 1

Отключить выбранные значения с помощью v-if. Смотрите рабочий пример на codepen

Пример

<div id="vue">
  <div class="input-select">
    <label>Country</label>
    <select v-model="selected" @change="selected.active = false">
      <option v-for="country in countries" v-bind:value="country" :key="country.name" v-if="country.active">
        {{ country.name }}
      </option>
    </select>

        <label>Country2</label>
    <select v-model="selected" @change="selected.active = false">
      <option v-for="country in countries" v-bind:value="country" :key="country.name" v-if="country.active">
        {{ country.name }}
      </option>
    </select>
  </div>

  <h2>Selected: <strong>{{ selected }} ({{ selectedName }})</strong></h2>
</div>

Обновлено

<div id="vue">
  <div class="input-select">
    <label>Country</label>
    <select v-model="selected" @change="setHidden()">
      <option v-for="country in countries" v-bind:value="country" :key="country.name" :disabled="!country.active">
        {{ country.name }}
      </option>
    </select>

        <label>Country2</label>
    <select v-model="selected2">
      <option v-for="country in countries" v-bind:value="country" :key="country.name" v-if="country.active">
        {{ country.name }}
      </option>
    </select>
  </div>

  <h2>Selected: <strong>{{ selected.name }}</strong>
    <h2>Selected2: <strong>{{ selected2.name }}</strong>
  </h2>
</div>

Answer 2

Чтобы отключить выбранное значение из тега select в Vue, мой подход будет следующим:

шаблон

        <select class="selectedCam" @change="dosomething" v-model='selectedCam1'>
            <option value="" disabled selected>select from below</option>
            <option value="1" :disabled="selectedCam2 == 'Direction 1' || selectedCam3 == 'Direction 1'">Direction 1</option>
            <option value="2">Direction 2</option>
           ....
        </select >
        <select class="selectedCam" @change="dosomething" v-model='selectedCam2'>
            <option value="" disabled selected>select from below</option>
            <option value="1">Direction 1</option>
            <option value="2">Direction 2</option>
           ....
        </select >
  <select class="selectedCam" @change="dosomething" v-model='selectedCam3'>
            <option value="" disabled selected>select from below</option>
            <option value="1">Direction 1</option>
            <option value="2">Direction 2</option>
           ....
        </select >

данные

data () {
   return {
      selectedCam1: '',
      selectedCam2: '',
      selectedCam3: '',
      ...
   }
}

Итак, здесь вы можете видеть, что я устанавливаю опцию 1 с первого выбора, чтобы отключить, если выбор 2 или 3 уже установлен на Direction 1.