[Vuejs]-How do you use selectors in Vue?

by

0👍

To disable a selected value from a select tag in Vue, my approach would be this:

template

        <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

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

So, here you can see I set option 1 from the first select to disable if select 2 or 3 is already set to Direction 1.

0👍

Disable selected values with v-if. See working example on codepen

Example

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

Updated

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

Leave a comment