Question

我的页面上有几个选择元素，并且想要获取页面上具有特定类的所有选定元素的值的列表

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

如果从我的元素中的一个选择中选择一个值，那么我想在我元素中共享相同类的所有其他选择中禁用它。该列表将是动态的，具体取决于当时系统中插入了多少个凸轮，因此我不知道任何时间点会生成多少个凸轮。

我知道在使用vuejs时，我不应该使用JQuery操作Dom。

但是我知道使用JQuery我可以寻找$('. selectedCam')并获取共享该类的对象数组，并找到这些元素的当前值，我可以在onChange事件上使用这些元素来禁用其他选项选择一次即可。

Vue Js中是否有类似的东西？还是应该在Vue Js中尝试其他方法来禁用页面上生成的其他选择中的这些选项？

Answer 1

要从Vue中的select标记中禁用选定的值，我的方法是：

模板

        <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: '',
      ...
   }
}

因此，在这里您可以看到如果选择2或3已设置为Direction 1，则我将第一个选择中的选项1设置为禁用。

Answer 2

使用v-if禁用选定的值。参见工作示例on 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>

您如何在Vue中使用选择器？

2 个答案: