How to setup multiple dropdowns in vuetify

Question

Someone know ho to setup multiple dropdowns in vuetify I am new to learning in this framework. Let me explain In this situation im need to display all categories, subcategories and parent categories In finish result im want get something like this Anyway thanks for help

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

Answer 1

1. You will need to bind each dropdown to a data member.
2. Add a watch to the data member, and when it changes, repopulate the other dropdowns and the default value.

Setting immediate in the watcher will call the handler when loaded, before the user selects an item, and populates the initial state.

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>