Vue JS select menu - remove duplicates

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>

Rotiken Gisa · Accepted Answer · 2022-02-01 15:01:29Z

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

answered Feb 1, 2022 at 15:01

Rotiken Gisa

4203 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user13928344 Over a year ago

Lovely stuff. Thank you very much. Exactly what I was looking for.

Collectives™ on Stack Overflow

Vue JS select menu - remove duplicates

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related