disable selected option from select using vue-CodePudding

i have this select and i want to make it so that when I press any of the options, the option i pressed gets disabled so the user can see the option he selected easier.

<select v-model="modalIU.inpIdSpecialitate" v-on:change="disableEnable()">
    <option :value='null'>.:: fără legătură specialitate ::.</option>
    <option v-for="item in allSectiiSpecialitati.filter(el => el.idSpecialitate !== null).sort((a, b) => (a.denumireSpecialitate > b.denumireSpecialitate) ? 1 : -1)"  :value="item.idSpecialitate">@{{ item.denumireSpecialitate }}</option>
</select>

CodePudding user response：

I just created a codesandbox example for this functionality, I added a disabled property for each option, and on change event listner, I get the option index, and make it disabled.

https://codesandbox.io/s/elated-smoke-lwcriw?file=/src/components/DisabledOptionOnSelect.vue:351-513

CodePudding user response：

There's no need to add a custom method, you can work with v-model and the data you already have.
Add a :disabled='modalIU.inpIdSpecialitate === item.inpIdSpecialitate' on the option with the v-for, so you conditionally disable the option if it is the one currently selected.
You can then remove the v-on:change="disableEnable()". Also consider adding a :key attribute to your v-for for best practice.