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

Question

I have 3 dropdowns and I'm trying to figure out how to disable an already chosen option. Regarding to this post here I tried the following:

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

because user.languages returns an array.

But this doesn't seem to work at all. If I remove the includes(language.value) then everything is disabled right off the bat (obviously).

Answer 1

language.value a String?

I think we should change from "language.value" to "language['lang_'+locale]"

Answer 2

Have you tried it for a single dropdown and is it working properly for it?
Because I think if it's not working for a single just try like below:

In data(), take one variable that is an empty array and then try this:

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