根据 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>

Answer 2

正如@wittgenstein 所说，您可以使用计算属性：

new Vue({
  el: '#app',
  data() {
    return {
      subjects: [
        "Subject01",
        "Subject02",
        "Subject03",
        "Subject04",
        "Subject05",
        "Subject06",
        "Subject07",
        "Subject08",
        "Subject09",
        "Subject10",
        "Subject11",
        "Subject12",
        "Subject13",
        "Subject14",
        "Subject15",
        "Subject16",
      ],
      one: "",
      two: "",
      three: "",
    };
  },
  computed: {
    select1() {
      return this.subjects
    },
    select2() {
      if (this.one === 'Subject01') {
          return this.subjects.filter(subject => !['Subject04', 'Subject08'].includes(subject))
      }
      return this.subjects
    },
    select3() {
      if (this.two === 'Subject16') {
          return this.subjects.filter(subject => subject !== 'Subject04')
      }
      return this.subjects
    },
  },
  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="app">
<select v-model="one" id="selectone">
    <option v-for="subject in select1" :key="subject">
      {{ subject }}
    </option>
  </select>
  <select v-model="two" :disabled="!one" id="selecttwo">
    <option
      v-for="subject in select2"
      :key="subject"
    >
      {{ subject }}
    </option>
  </select>
  <select v-model="three" :disabled="!two" id="selectthree">
    <option
      v-for="subject in select3"
      :key="subject"
    >
      {{ subject }}
    </option>
  </select>

  <div v-if="one">You have selected: {{ one }} {{ two }} {{ three }}</div>
</div>

Answer 3

将单独的计算机属性作为第二个和第三个选择选项的源并在循环中呈现它们。

当第一次选择选项值发生变化时，这些计算机属性会自动更新。

确保你使用 :key 否则渲染选项的顺序可能会不一致。