如何在Vuejs中创建动态两个关系下拉菜单
在Vue.js中创建动态的两个关联下拉菜单，可以通过以下步骤实现：
- 定义数据：首先，你需要定义两个数组，分别表示两个下拉菜单的选项。例如，我们定义一个数组
categories表示第一个下拉菜单的选项，另一个数组subcategories表示第二个下拉菜单的选项。
data() {
return {
categories: ['Category 1', 'Category 2', 'Category 3'],
subcategories: {
'Category 1': ['Subcategory 1.1', 'Subcategory 1.2', 'Subcategory 1.3'],
'Category 2': ['Subcategory 2.1', 'Subcategory 2.2', 'Subcategory 2.3'],
'Category 3': ['Subcategory 3.1', 'Subcategory 3.2', 'Subcategory 3.3']
},
selectedCategory: '',
selectedSubcategory: ''
}
}- 创建模板：在Vue.js的模板中，使用
v-model指令绑定选中的值，并使用v-for指令循环渲染下拉菜单的选项。
<template>
<div>
<select v-model="selectedCategory" @change="updateSubcategories">
<option value="">Select Category</option>
<option v-for="category in categories" :value="category">{{ category }}</option>
</select>
<select v-model="selectedSubcategory">
<option value="">Select Subcategory</option>
<option v-for="subcategory in subcategories[selectedCategory]" :value="subcategory">{{ subcategory }}</option>
</select>
</div>
</template>- 创建方法：在Vue.js的方法中，定义一个方法
updateSubcategories来更新第二个下拉菜单的选项，根据第一个下拉菜单的选中值。
methods: {
updateSubcategories() {
this.selectedSubcategory = '';
}
}- 完整示例：下面是一个完整的示例代码，展示了如何在Vue.js中创建动态的两个关联下拉菜单。
<template>
<div>
<select v-model="selectedCategory" @change="updateSubcategories">
<option value="">Select Category</option>
<option v-for="category in categories" :value="category">{{ category }}</option>
</select>
<select v-model="selectedSubcategory">
<option value="">Select Subcategory</option>
<option v-for="subcategory in subcategories[selectedCategory]" :value="subcategory">{{ subcategory }}</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
categories: ['Category 1', 'Category 2', 'Category 3'],
subcategories: {
'Category 1': ['Subcategory 1.1', 'Subcategory 1.2', 'Subcategory 1.3'],
'Category 2': ['Subcategory 2.1', 'Subcategory 2.2', 'Subcategory 2.3'],
'Category 3': ['Subcategory 3.1', 'Subcategory 3.2', 'Subcategory 3.3']
},
selectedCategory: '',
selectedSubcategory: ''
}
},
methods: {
updateSubcategories() {
this.selectedSubcategory = '';
}
}
}
</script>这样，当你选择第一个下拉菜单的选项时，第二个下拉菜单的选项会根据选择的值进行动态更新。
相关·内容
我在尝试根据一个select的选定值动态设置另一个select的选项时遇到了困难。 div_list: [ ];}
当div_code值为1时，如何使用ajax中的相关数据加载
浏览 14提问于2017-07-14得票数 1
回答已采纳
当我在下面的代码中切换变量active时，将对列表中的所有元素应用/删除active CSS类。如何分别定位列表元素？
浏览 36提问于2016-11-22得票数 4
回答已采纳
2回答
我想用vuejs和php开发一个应用程序。可以安装在许多目录中，如https://example2.com/path1/p/app,<ba
浏览 4提问于2019-11-02得票数 9
回答已采纳
申请结构：
因此，在图表呈现组件中，您通常需要对每个图表类型执行'extends: Bar‘、'extends: Line’等操作，从而需要一个ChartRender它在一定程度上适用于图表类型的更改:数据更改，组件重新呈
浏览 23提问于2020-03-27得票数 2
我有三个实体，如会员，LongList和ShortList。这两个列表都与成员实体有多到多的关系。我将成员添加到LongLists中，并且可以在多个LongLists中添加成员。用户将从他/她选择的ShortLists成员创建LongList。我可以根据成员在特定LongList中的成员身份创建过滤视图，但我不能在用户端进行此选择，我只能为创建的每个LongList创建不同的视图，这不是一个好情况，因为Lo
浏览 3提问于2013-09-27得票数 1
回答已采纳
3回答
我想在我的div元素上实现这个活动链接，您可以在这里看到我想用我的代码实现的示例
$( 'ul.nav li' ).on( 'click', function() { $( this ).addClass( 'active' );});
浏览 0提问于2017-08-05得票数 6
回答已采纳
1回答
我已经创建了Linq在Sql动态数据站点上的应用程序。我有许多具有关系结构的表。在更改DDL中的数据选择之后，它应该从这些表中筛选数据。这种关系如下所示：我想把SiteId的过滤器应用到tblEnt
浏览 5提问于2013-11-10得票数 0
1回答
用户使用带有验证下拉菜单的单元格选择这些材料中的一种(这部分很好用)。
我需要第二个下拉列表，它将显示有效的构造方法，可以使用从第一个下拉列表中选择的材料。通过使用构造方法表中的name列作为验证限制，我可以显示所有的构造方法，但我只需要有效的方法。我可以在验证框中手动输入一个逗号分隔列表，下拉列表也能正确生成，但是我不能给验证框一个包含逗号分隔列表的单元格的VLOOKUP (=VLOOKUP(Material，MaterialTbl,7，False我还尝试将VLOOKUP放在一个单元格中，并将验证框指向该单元格(=$H$
浏览 1提问于2013-03-06得票数 2
我在Vuejs 2中有一个动态创建的单选按钮列表： </div>
但是，"v-bind:for“不起作用--而且硬编码"f
浏览 3提问于2018-03-01得票数 0
回答已采纳
1回答
关于如何使用MySql工作台创建外键关系(如)，有很多教程，但我找不到任何描述如何提供关系属性的教程。
浏览 2提问于2017-05-02得票数 0
回答已采纳
1回答
如何设置NSManaged变量？
、、、、
我有一个NSManagedObject类，它有两个关系：courseA和courseB。这些关系应该用动态变量表示。如何从类外部更改此变量？} }谢谢你的每一个想法。
浏览 2提问于2017-08-02得票数 0
回答已采纳
我不明白其中的关系，也不明白为什么每次它都会给我一个下拉菜单。以下是我所做的工作： Image showing relations 如您所见，我已经创建了一个关系"Coupon“"belongsTo”"users“ 在优惠券表格中，我创建了一个user_id列。所有我想要的是用户id显示在下一页，以便我可以保存到数据库时，用户创建优惠券。问题是，当我以用户身份登录并创建优惠券时，我看到的是一个下拉
浏览 21提问于2019-02-24得票数 0
我想动态地创建join查询，其中包含以下表：表2) groupTable：包含groupId、groupName问题：与案例1一样，有两个表选项: groupRoles或userGroup。那么，我如何知道从这两个选项中动态选择哪个表，以便通过关系表(在我的例子中是userG
浏览 2提问于2014-03-10得票数 0
我刚从一群需要创建动态PDF的用户那里得到一些需求。我们的软件栈使用spring java后端和一个vueJS前端。所需经费：动态字体、样式等多页打印我已经研究并尝试实施iText和Jasper报告。我们还没有弄清楚如何在当前的技术栈<
浏览 0提问于2019-04-18得票数 0
回答已采纳
我正在使用OutSystems平台，我在实现动态问卷之类的东西时遇到了问题。管理员用户应该能够登录并添加新的问题(不限制问题的数量)，修改现有的问题/答案和删除现有的问题。答案选择可以是各种类型，如单选按钮、下拉菜单、文本框等。普通用户应在下次登录时看到更新的调查问卷。
我在考虑创建一个类似于模板的东西，我们可以在运行时向其中添加动态控件。我们可以使用.net等的动态页面渲染功能来实现这一点，但我们希望看看如何在OutSystems中实现这一
浏览 0提问于2009-08-06得票数 1
回答已采纳
我可以看到如何在bootstrap中创建下拉菜单，但在YIi2的menuItems[]上下文中，我不确定语法。
我需要一个菜单项与下拉菜单为当月(它应该动态地解决它当然)，前2个月或3个月。
浏览 0提问于2015-03-08得票数 1
我在一个项目中使用ASP.NET动态数据，而且我有一个表，它有两个独立的字段，它们链接到不同表中的同一个外键。
检查邮件并注意消息中指定
浏览 0提问于2008-08-06得票数 14
回答已采纳
1回答
假设我在下拉菜单中选择Engineering，我希望动态创建另一个下拉菜单，其中包含与Engineering相关的值(例如:电子、计算机、电子产品等)。如何在JSF2.0中实现这一点？
浏览 3提问于2013-09-04得票数 8
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
