如何禁用下拉菜单中已选择的选项？答案

【问题标题】：How to disable an already selected option in a dropdown menu?如何禁用下拉菜单中已选择的选项？
【发布时间】：2020-01-18 23:10:25
【问题描述】：

我有 3 个下拉菜单，我正在尝试弄清楚如何禁用已选择的选项。关于this post here，我尝试了以下方法：

<template v-for="n in 3">
  <select
    v-model="user.languages[n-1]"
    :key="n"
    class="btn btn-secondary d-flex header-input"
  >
    <option
      v-for="language in languages"
      :key="language.id"
      :id="n"
      :value="language['lang_' + locale]"
      :disabled="user.languages.includes(language.value)"
    >{{language['lang_'+locale]}}</option>
  </select>
</template>

因为user.languages 返回一个数组。

但这似乎根本不起作用。如果我删除includes(language.value)，那么一切都会立即被禁用（显然）。

【问题讨论】：

标签： javascript forms vue.js

【解决方案1】：

language.value 一个字符串？

我认为我们应该从“language.value”更改为“language['lang_'+locale]”

【讨论】：

我认为你误解了 OP 的问题

【解决方案2】：

您是否尝试过单个下拉菜单，它是否正常工作？
因为我认为如果它不适用于单个，请尝试如下：

在 data() 中，取一个空数组变量，然后试试这个：

  <select v-model = "variable-name" and in option value:
  <option :value="language.value">

【讨论】：