Vue JS select menu - remove duplicates - vue.js

Question

I'm looking for some help, please? I have 3 select menus which have to display certain subjects depending on the previous selections.
One of the things I'm struggling with is how do I remove whatever the first selection is in menu one from both menu two and menu three?
Any help is greatly appreciated.
<template>
<select v-model="one">
<option disabled value>Select subject one</option>
<option v-for="subject in select1" :key="subject">
{{ subject }}
</option>
</select>
<select v-model="two" :disabled="!one">
<option disabled value>Select subject two</option>
<option v-for="subject in select2" :key="subject">
{{ subject }}
</option>
</select>
<select v-model="three" :disabled="!two">
<option disabled value>Select subject three</option>
<option v-for="subject in select3" :key="subject">
{{ subject }}
</option>
</select>
<div v-if="one">
<ul>
You have selected:
<li>{{ one }}</li>
<li>{{ two }}</li>
<li>{{ three }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
subjects: [
"Subjectone",
"Subjecttwo",
"Subjectthree",
"Subjectfour",
"Subjectfive",
],
one: "",
two: "",
three: "",
selectOne: {
Subjectone: [
"Subjecttwo",
"Subjectthree",
"Subjectfour",
"Subjectfive",
],
Subjecttwo: ["Subjectone", "Subjectfive"],
Subjectthree: ["Subjectone", "Subjectfive"],
Subjectfour: ["Subjectone", "Subjectfive"],
Subjectfive: [
"Subjectone",
"Subjecttwo",
"Subjectthree",
"Subjectfour",
],
},
selectTwo: {
Subjectone: [
"Subjecttwo",
"Subjectthree",
"Subjectfour",
"Subjectfive",
],
Subjecttwo: ["Subjectone", "Subjectfive"],
Subjectthree: ["Subjectone", "Subjectfive"],
Subjectfour: ["Subjectone", "Subjectfive"],
Subjectfive: [
"Subjectone",
"Subjecttwo",
"Subjectthree",
"Subjectfour",
],
},
selectThree: {
Subjecttwo: ["Subjecttwo", "Subjectthree", "Subjectfour"],
Subjectthree: ["Subjectthree", "Subjectfour", "Subjecttwo"],
Subjectfour: ["Subjectthree", "Subjectfour", "Subjecttwo"],
},
};
},
computed: {
select1() {
return this.subjects;
},
select2() {
if (this.one) {
return this.subjects.filter((s) =>
this.selectOne[this.one].includes(s)
);
}
return this.subjects;
},
select3() {
if (
this.one == "Subjectthree" ||
this.one == "Subjectfour" ||
this.two == "Subjectthree" ||
this.two == "Subjectfour"
) {
return this.subjects.filter(
(subject) => !["Subjectthree", "Subjectfour"].includes(subject)
);
}
if (this.one == "Subjecttwo" || this.two == "Subjecttwo") {
return this.subjects.filter(
(subject) =>
!["Subjectthree", "Subjectfour", "Subjecttwo"].includes(subject)
);
}
if (this.two) {
return this.subjects.filter((s) =>
this.selectTwo[this.two].includes(s)
);
}
return this.subjects;
},
},
};
</script>
<style>
li {
display: inline-block;
}
ul li + li:not(:last-child):before {
content: ", ";
}
ul li + li:last-child:before {
content: "\00a0&\00a0";
}
ul li:last-child:after {
content: ".";
}
</style>

Answer 1

You can filter the select as follows:
select2() {
if (this.one) {
return this.subjects.filter(sub => sub !== this.one);
}
return this.subjects;
},
select3() {
if (this.one && this.two) {
return this.subjects.filter(sub => ![this.one, this.two].includes(sub));
} else {
if (this.one && !this.two) {
return this.select2
}
if (this.two && !this.one) {
return this.subjects.filter(sub => sub !== this.two);
}
return this.subjects;
}
}