如何在 vuetify 中设置多个下拉菜单答案

【问题标题】：How to setup multiple dropdowns in vuetify如何在 vuetify 中设置多个下拉菜单
【发布时间】：2020-06-26 12:29:32
【问题描述】：

有人知道如何在 vuetify 中设置多个下拉菜单我是在这个框架中学习的新手。让我解释在这种情况下，我需要显示所有类别、子类别和父类别在完成结果我想要得到这样的东西无论如何感谢您的帮助

<ul>
  <li>Category
    <ul>
      <li>SubCategory 1.1
        <ul>
          <li>
             Parent Category
          </li>
        </ul>
      </li>
      <li>SubCategory 1.2</li>
    </ul>
  </li>
  (...)
</ul>

【问题讨论】：

标签： vue.js vuejs2 vue-component vuex vuetify.js

【解决方案1】：

您需要将每个下拉列表绑定到一个数据成员。
为数据成员添加一个监视，当它发生变化时，重新填充其他下拉列表和默认值。

在观察者中设置immediate 将在加载时调用处理程序，在用户选择项目之前，并填充初始状态。

https://codepen.io/Flamenco/pen/xovKLq

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: () => ({
    item: "color",
    item2: "red",
    items: ["color", "number"],
    items2: "null"
  }),
  watch: {
    item: {
      immediate: true,
      handler(value) {
        if (value === "color") {
          this.items2 = ["red", "blue"];
          this.item2 = "red";
        } else {
          this.items2 = ["1", "2", "3"];
          this.item2 = "1";
        }
      }
    }
  }
});

<div id="app">
  <v-app>
    <div style='width:3in'>
      <v-select v-model='item' :items='items' label='Select 1'></v-select>
      <v-select v-model='item2' :items='items2' label='Select 2'></v-select>
    </div>
  </v-app>
</div>

【讨论】：

非常感谢很好的解决方案