javascript - 根据 VueJS 中的先前选择隐藏第二个和第三个选择菜单中的特定选项

Question

我想根据在选择 1 中选择的内容显示/隐藏选择菜单 2 中的某些选项，并根据在选择菜单 2 中选择的内容显示/隐藏选择菜单 3 中的某些选项。

例如，如果用户在第一个菜单中选择“Subject01”，我想在菜单 2 中隐藏“Subject04”和“Subject08”。如果用户在选择 2 中选择“Subject016”，我想隐藏“菜单 3 中的 Subject11'。我有几个基于主题选择的场景。所以这些只是示例。

我可以将一个类添加到，但我不知道如何添加到各个标签。

感谢任何帮助。

代码:

<template>
  <select v-model="one" id="selectone">
    <option v-for="subject in subjects" :key="subject">
      {{ subject }}
    </option>
  </select>
  <select v-model="two" :disabled="!one" id="selecttwo">
    <option
      v-for="subject in subjects.filter((item) =>
        item.split(' ')[0].indexOf(this.one.split(' ')[0])
      )"
      :key="subject"
    >
      {{ subject }}
    </option>
  </select>
  <select v-model="three" :disabled="!two" id="selectthree">
    <option
      v-for="subject in subjects.filter(
        (item) =>
          item.split(' ')[0].indexOf(this.one.split(' ')[0]) &&
          item.split(' ')[0].indexOf(this.two.split(' ')[0])
      )"
      :key="subject"
    >
      {{ subject }}
    </option>
  </select>

  <div v-if="one">You have selected: {{ one }} {{ two }} {{ three }}</div>
</template>
<script>
export default {
  data() {
    return {
      subjects: [
        "Subject01",
        "Subject02",
        "Subject03",
        "Subject04",
        "Subject05",
        "Subject06",
        "Subject07",
        "Subject08",
        "Subject09",
        "Subject10",
        "Subject11",
        "Subject12",
        "Subject13",
        "Subject14",
        "Subject15",
        "Subject16",
      ],
      one: "",
      two: "",
      three: "",
    };
  },
  methods: {},
};
</script>
<style>
li {
  list-style-type: none;
}
.hide {
  display: none;
}

.show {
  display: block;
}
</style>

Answer 1

您可以在数据属性中创建具有匹配大小写的对象来显示项目，然后使用计算属性:

new Vue({
  el: "#demo",
  data() {
    return {
      subjects: ["Subject01", "Subject02", "Subject03", "Subject04", "Subject05", "Subject06", "Subject07", "Subject08", "Subject09", "Subject10", "Subject11", "Subject12", "Subject13", "Subject14", "Subject15", "Subject16",],
      disOne: {"Subject01":["Subject04", "Subject08"]}, // you can set here other cases for example for some other subject dont show array of other subjects
      disTwo: {"Subject16":["Subject11"]},
      one: "",
      two: "",
      three: "",
    }
  },
  computed: {
    sub2() {
      if (this.one) {
        return this.subjects.filter(s => !this.disOne[this.one].includes(s))
      }
    },
    sub3() {
      if (this.two) {
        return this.subjects.filter(s => !this.disTwo[this.two].includes(s))
      }
    }
  },
  methods: {},
})

li {
  list-style-type: none;
}
.hide {
  display: none;
}

.show {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <select v-model="one" id="selectone">
    <option v-for="subject in subjects" :key="subject">
      {{ subject }}
    </option>
  </select>
  <select v-model="two" :disabled="!one" id="selecttwo">
    <option
      v-for="subject in sub2"
      :key="subject"
    >
      {{ subject }}
    </option>
  </select>
  <select v-model="three" :disabled="!two" id="selectthree">
    <option
      v-for="subject in sub3"
      :key="subject"
    >
      {{ subject }}
    </option>
  </select>
  <div v-if="one">You have selected: {{ one }} {{ two }} {{ three }}</div>
</div>