Vue JS选择菜单-删除重复项

Question

我正在寻求帮助，好吗？我有3个选择菜单，必须根据以前的选择显示某些主题。

我正在努力解决的一件事是，如何从菜单二和菜单三中删除菜单一中的第一个选项？

非常感谢您的帮助。

<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: "0a0&0a0";
}
ul li:last-child:after {
content: ".";
}
</style>

Answer 1

您可以按如下方式筛选选择：

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