vue 级联下拉框选择的思维

        在原来的js的思维下,级联下拉框的选择往往是,先绑定一级下拉框的菜单,然后在该下拉框下onchange, 在onchange事件中获取当前选项,然后绑定二级下拉框的数据,以此类推……

      在vue框架下应该改变思维,首先设置一级下拉框的数据,然后watch 该 选项,如果改变,则设置二级下拉框的数据,一次类推:

<el-form-item label="省"><el-select v-model="where.provinceId" placeholder="请选择省份" clearable ><el-option v-for="item in provinces" :key="item.id" :label="item.name" :value="item.id" /></el-select>
</el-form-item>
<el-form-item label="市"><el-select v-model="where.cityId" placeholder="请选择市" clearable><el-option v-for="item in cities" :key="item.id" :label="item.name" :value="item.id" /></el-select>
</el-form-item>
const provinces = ref([])
const cities = ref([])onMounted(()=>{// 通过接口获取省份provinces.value = [...data]
})watch: {provinceId: {deep: true,handler() {// 根据接口获取市的数据cities.value=[...data]// 清空城市的选择where.cityId=''}}
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/45216.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

经典再现,回顾常见排序算法之冒泡排序,附Java源码及优化改进实现

回顾一下排序算法&#xff0c;老酒装新瓶&#xff0c;给自己的技能点做个回放。 排序(Sorting) 是计算机程序设计中的一种重要操作&#xff0c;它的功能是将一个数据元素(或记录)的任意序列&#xff0c;重新排列成一个有序的序列&#xff0c;也可以理解为高矮个站队。 衡量排…

Renesas R7FA8D1BH (Cortex®-M85) 控制DS18B20

目录 概述 1 软硬件 1.1 软硬件环境信息 1.2 开发板信息 1.3 调试器信息 2 FSP和KEIL配置 2.1 硬件接口电路 2.2 FSB配置DS18B20的IO 2.3 生成Keil工程文件 3 DS18B20驱动代码 3.1 DS18B20介绍 3.2 DS18B20驱动实现 3.2.1 IO状态定义 3.2.2 读IO状态函数 3.2.3…

OpenCV:python图像旋转,cv2.getRotationMatrix2D 和 cv2.warpAffine 函数

前言 仅供个人学习用&#xff0c;如果对各位朋友有参考价值&#xff0c;给个赞或者收藏吧 ^_^ 一. cv2.getRotationMatrix2D(center, angle, scale) 1.1 参数说明 parameters center&#xff1a;旋转中心坐标&#xff0c;是一个元组参数(col, row) angle&#xff1a;旋转角度…

Go-知识测试-模糊测试

Go-知识测试-模糊测试 1. 定义2. 例子3. 数据结构4. tesing.F.Add5. 模糊测试的执行6. testing.InternalFuzzTarget7. testing.runFuzzing8. testing.fRunner9. FuzzXyz10. RunFuzzWorker11. CoordinateFuzzing12. 总结 建议先看&#xff1a;https://blog.csdn.net/a1879272183…

一文入门【NestJs】Providers

Nest学习系列 ✈️一文入门【NestJS】 ✈️一文入门【NestJs】Controllers 控制器 &#x1f6a9; 前言 在NestJS的世界里&#xff0c;理解“Providers”是构建健壮、可维护的后端服务的关键。NestJS&#xff0c;作为Node.js的一个现代框架&#xff0c;采用了Angular的一些核…

Redis的安装配置及IDEA中使用

目录 一、安装redis&#xff0c;配置redis.conf 1.安装gcc 2.将redis的压缩包放到指定位置解压 [如下面放在 /opt 目录下] 3.编译安装 4.配置redis.conf文件 5.开机自启 二、解决虚拟机本地可以连接redis但是主机不能连接redis 1.虚拟机网络适配器网络连接设置为桥接模式…

VSCode上通过C++实现单例模式

单例模式实际上就是为了确保一个类最多只有一个实例&#xff0c;并且在程序的任何地方都可以访问这个实例&#xff0c;也就是提供一个全局访问点&#xff0c;单例对象不需要手动释放&#xff0c;交给系统来释放就可以了&#xff0c;单例模式的设计初衷就是为了在整个应用程序的…

vue 下拉菜单树形结构——vue-treeselect的组件使用

参考&#xff1a; https://www.cnblogs.com/syjtiramisu/p/17672866.htmlhttps://www.cnblogs.com/syjtiramisu/p/17672866.html vue-treeselect的使用 - 简书下载依赖 使用https://www.jianshu.com/p/459550e1477d 实际项目使用&#xff1a;

uni-app iOS上架相关App store App store connect 云打包有次数限制

相册权限 uni-app云打包免费有次数 切换一个账号继续

使用SOAP与TrinityCore交互(待定)

原文&#xff1a;SOAP with TrinityCore | TrinityCore MMo Project Wiki 如何使用SOAP与TC交互 SOAP代表简单对象访问协议&#xff0c;是一种类似于REST的基于标准的web服务访问协议的旧形式。只要必要的配置到位&#xff0c;您就可以利用SOAP向TrinityCore服务器发送命令。 …

Open3D 计算点云配准的精度和重叠度

目录 一、概述 1.1计算配准精度 1.2计算点云重叠度 二、代码实现 2.1关键函数 2.2完整代码 三、实现效果 3.1原始点云 3.2计算结果 一、概述 在点云配准中,精度和重叠度是两个重要的评价指标。精度通常用均方根误差(RMSE)来衡量,而重叠度则表示两个点云在…

centos环境启动/重启java服务脚本优化

centos环境启动/重启java服务脚本优化 引部分命令说明根据端口查询服务进程杀死进程函数脚本接收参数 脚本注意重启文档位置异常 引 在离线环境部署的多个java应用组成的系统&#xff0c;测试阶段需要较为频繁的发布&#xff0c;因资源限制&#xff0c;没有弄devops或CICD那套…

华为手机联系人不见了怎么恢复?3个解决方案

华为手机联系人列表就像是我们精心编织的社交网络之网。然而&#xff0c;有时&#xff0c;这张网可能会因为各种原因而意外破损&#xff0c;联系人信息消失得无影无踪&#xff0c;让我们陷入“人脉孤岛”的困境。华为手机联系人不见了怎么恢复&#xff1f;别担心&#xff0c;我…

构建高质量数据集与智能数据工程平台:播客AI Odyssey深度对话实录

对话整数智能联创和前IDEA研究员&#xff1a;构建高质量数据集与智能数据工程平台 - AI Odyssey | 小宇宙 - 听播客&#xff0c;上小宇宙 人工智能技术的日益深远发展&#xff0c;对人工智能的性能提升与技术迭代提出了新的要求。在大模型训练中&#xff0c;已有的研究和实践表…

【操作系统】进程管理——用信号量机制解决问题,以生产者-消费者问题为例(个人笔记)

学习日期&#xff1a;2024.7.10 内容摘要&#xff1a;利用信号量机制解决几个经典问题模型 目录 引言 问题模型 生产者-消费者问题&#xff08;经典&#xff09; 多生产者-多消费者问题 吸烟者问题 读者写者问题&#xff08;难点&#xff09; 哲学家进餐问题&#xff0…

解决POST请求中文乱码问题

解决POST请求中文乱码问题 1、乱码原因2、解决方法3、具体步骤 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在Web开发中&#xff0c;处理POST请求时经常遇到中文乱码问题&#xff0c;这主要是由于服务器在接收到POST请求的数据后&#x…

物联网时代的等保测评:保障万物互联的安全

随着物联网&#xff08;IoT&#xff09;技术的飞速发展&#xff0c;我们的生活正逐渐进入一个万物互联的新时代。从智能家居到智慧城市&#xff0c;从无人驾驶到农业物联网&#xff0c;IoT技术正在渗透到我们生活的方方面面。然而&#xff0c;随着IoT设备数量的激增&#xff0c…

BUG解决:postman可以请求成功,但Python requests请求报403

目录 问题背景 问题定位 问题解决 问题背景 使用Python的requests库对接物联数据的接口之前一直正常运行&#xff0c;昨天突然请求不通了&#xff0c;通过进一步验证发现凡是使用代码调用接口就不通&#xff0c;而使用postman就能调通&#xff0c;请求参数啥的都没变。 接口…

SSL 证书错误:如何修复以及错误发生的原因

SSL证书可以提升网站的可信度。然而&#xff0c;如果您的SSL证书出现错误&#xff0c;您可能会得到一个“不安全”的标签&#xff0c;这可能会导致访问者失去对您网站的信任并转向竞争对手。 本文将介绍SSL证书错误的原因及其对用户的潜在影响。随后&#xff0c;我们将提供详细…

MybatisPlus 核心功能

MybatisPlus 核心功能 文章目录 MybatisPlus 核心功能1. 条件构造器1.1 QueryWrapper1.2 LambdaQueryWrapper&#xff08;推荐&#xff09;1.3 UpdateWrapper1.4 LambdaUpdateWrapper 2. 自定义SQL3. Service接口 1. 条件构造器 当涉及到查询或修改语句时&#xff0c;MybatisP…