时间戳

首页 > 解决方案 > 如何在 vuetify 中设置多个下拉菜单

vue.js - 如何在 vuetify 中设置多个下拉菜单

问题描述

有人知道如何在 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.jsvuejs2vue-componentvuexvuetify.js

解决方案

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

观察者中的设置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>

推荐阅读