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>
解决方案
- 您需要将每个下拉列表绑定到一个数据成员。
- 向数据成员添加一个监视,当它发生变化时,重新填充其他下拉列表和默认值。
观察者中的设置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>
推荐阅读
- node.js - 如何将反向代理 nginx 路由停靠到 1 个反应和 1 个快速应用程序?我的网关不好
- algorithm - 获得产生不可用化学算法的最低成本
- java - 使用 RxJava3 从房间数据库的片段中填充 Spinner 问题
- reactjs - 将文本值传递给另一个组件
- next.js - 在 NextJs SSR 中操作 DOM onClick
- java - 最短路径 Java 二维数组
- haskell - 如何为包装函数编写 Hedgehog 生成器?
- python-3.x - 按子字典的两个值对字典的字典排序
- python - 如何使用 sympy 检查矩阵是否为正方形?
- python - 直方图未显示在 matplotlib 中