[Vuejs]-How to setup multiple dropdowns in vuetify

by

2👍

✅

  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>

Leave a comment