vue中使用form表单中使用select选择器,同时绑定两个数据

最新推荐文章于 2025-02-26 08:00:00 发布
最新推荐文章于 2025-02-26 08:00:00 发布
阅读量4.7k 收藏 12
点赞数 2
分类专栏： 前端 文章标签： select
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ju__ju/article/details/103293695
版权

在这里插入图片描述
项目有个地方需要在form中使用select下拉选择框,选择的时候同时传两个数据,例如我选择软件名称,需要我同时传form.softId和form.softName.这两个select的数据都是动态获取的.
在这里插入图片描述
解决方法是给这两个select框添加change事件,当下拉选项改变时,使用filter()方法返回包含这个值的对象,然后再给form赋值,如:在这里插入图片描述

VUE select 双向绑定
carbonzhao的专栏
07-22 1万+
如下截图及源码，可以跑起来看看效果，select的双向绑定，指定v-model键就可以，内部的option被选中后，对应的值就会透传到select的v-model指令中。使用的时候，取其值就可以。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
vue3 antd项目实战——Form表单使用【v-model双向绑定数据，form表单嵌套input输入框、Radio单选框】
XSL_HR的博客
12-30 7618
一个功能齐全的后台管理系统，离不开Form表单的使用，从本期文章开始会详细介绍如何在项目中使用form表单、完成数据的双向绑定、各种组件的嵌套，最后形成封装好了的form表单，可以实现复用。
Vue -- 双向数据绑定
天行健 君子以自强不息，地势坤 君子以厚德载物。
05-18 3169
1. Vue--双向数据绑定 Vue.js是一个MVVM框架， 即数据双向绑定， 即当数据发生变化的时候， 视图也就发生变化， 当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。 1.1 在表单中使用双向数据绑定 你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇， 但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 注意：v-model会忽略所有表单元素
前端必知必会-Vue Form表单之多选框select多选
最新发布
qq_24018193的博客
02-26 332
本文介绍了Vue Form表单之多选框select多选的使用，如有问题欢迎私信和评论。
vue中select的使用以及select设置默认选中
热门推荐
码农之路
11-08 1万+
简介 今天写pc端引入vue，遇到了一个问题，就是我循环出select内的数据以后，发现原本默认显示第一条的select框变成了空白，要选择后才有显示，结果查了好多文档，讲的都不是很清楚，后来看到一句提示，试了一下发现居然还有这种隐藏属性。所以，我决定自己写下来，讲清楚。   解决过程 html代码如下，通过v-model可以获取到选中的值，如果option中存在value属性，优先获取v...
vue单选框选中_vue中怎么处理多个单选框，且单选框互不影响的方案
weixin_30067913的博客
01-30 1580
项目需求是：需要提交多个老师的信息，信息中包含老师的职位，职位是单选框；难点是：怎么确保多个单选框不冲突，单选框怎么用v-for遍历出来；最终效果是：1、首先最外层先通过数组遍历出来，数组结构需要加上老师名称和手机号，便于保存，具体结构如下：teacherList: [{ name:'一', role: 1, teacherName: '', phone: null},{ name:'二', ro...
Vue Element 之表单绑定
倚树探星的博客
01-24 620
第一步：在form表单中添加:model绑定数据对象 第二步：在form下的元素上添加v-model:进行数据对象的属性绑定 第三步：在script标签中写数据对象 至此，完成 ...
Vue中el-form标签中的自定义el-select下拉框标签功能
11-20
而`el-select` 是一个下拉选择器，常用于用户输入数据的选择，比如从预设的选项列表中进行选择。在实际项目中，我们经常需要对`el-select` 进行自定义，以满足特定的需求，例如动态生成下拉框选项或根据业务逻辑改变...
vue中级联选择器回填_浅谈Vue使用Cascader级联选择器数据回显中的坑
weixin_30356837的博客
01-14 2694
业务场景由于项目需求，需要对相关类目进行多选，类目数据量又特别大，业务逻辑是使用懒加载方式加载各级类目数据，编辑时回显用户选择的类目。问题描述使用Cascader级联选择器过程中主要存在的应用问题如下：1、由于在未渲染节点数据的情况下编辑时无法找到对应的类目数据导致无法回显，如何自动全部加载已选择类目的相关节点数据；2、提前加载数据后，点击相应父级节点出现数据重复等；3、使用多个数据源相同的级联选...
Element-ui中 选择器（select）多选下拉框实现全选功能.zip
10-10
在这个特定的场景中，我们关注的是Element-UI中的选择器组件——`<el-select>`，特别是如何实现多选下拉框的全选功能。在实际应用中，全选功能常用于批量操作，如用户一次性勾选多个选项进行批量删除、导出等操作。 ...
Vue——表单输入绑定
hulin的博客
04-09 1264
Vue的表单输入绑定
Vue中循环绑定值
ahao214——Dreamspace
11-06 633
<el-form-item> <div v-for="(item,index) in absDate" :key="index" :label="item.date" style="float:left;padding-right:10px;"> <p>{{item.date}}</p> <p style="color:red;">{{item.AM}}</p> <p style="c.
select的双向绑定方法
我欲乘风破浪
06-02 3992
首先看官网的介绍，明确指出v-model指令在表单<input>、<textarea>、<select>中使用 在select中绑定一个v-model 下面这段代码的含义：为select绑定了一系列的内容，然后option里面的值是根据data里面的selectItem展示，selectItemContain需要在data里面申明 <se...
3.写vue遇到的小问题及解决方法。如：一个下拉框绑定两个值传给后端；如何获取el-tree某个子节点的父节点信息；查询的时候传合并后的对象
qq_52999833的博客
03-17 601
问题1 问题描述 如何给一个下拉框绑两个参数，传给后端 解决方法 （1）给el-select 绑定@change="addriskprefimchange"方法 <!-- 这里希望选中下拉框数据，同时给后台传riskpredim 和riskpredimname 其中riskpredim是RiskpredimnameOpions的codecode riskpredimname是RiskpredimnameOpions的codename--> <el-selec
vue动态列表上，多个el-select共用同一个筛选列表，控制一个el-select选择某项后，其它el-select就不能再选择该项了
m0_53682699的博客
09-11 742
需求：动态列表上，多个el-select共用同一个筛选列表，控制一个el-select选择某项后，其它el-select就不能再选择该项了。
vue两个按钮进行单选_前端系列——Vue表单处理
weixin_36443680的博客
01-29 1139
1、双向数据绑定双向和单向是对应的。单向数据绑定是指数据的变化导致了视图的变化，但是视图的变化不会导致数据的变化；双向数据绑定是指数据的变化会导致视图的变化，而视图的变化也会导致数据的变化。单向数据绑定就是 v-text、{{}}、v-html使用最多的。双向数据绑定是 v-model来实现的。但是有大前提，只有表单元素才可以使用v-model。不是任何元素都可以的。常见的表单元素有：input(...
vue设置多选框默认勾选_vue中select的使用以及select设置默认选中
weixin_39915500的博客
12-22 1635
简介今天写pc端引入vue，遇到了一个问题，就是我循环出select内的数据以后，发现原本默认显示第一条的select框变成了空白，要选择后才有显示，结果查了好多文档，讲的都不是很清楚，后来看到一句提示，试了一下发现居然还有这种隐藏属性。所以，我决定自己写下来，讲清楚。解决过程html代码如下，通过v-model可以获取到选中的值，如果option中存在value属性，优先获取value值即cou...
vue+elementUI 前端 select选择框同时传两个值给后端
weixin_44289771的博客
01-12 4833
介绍： form表单中有一个select选择框，下拉框显示人员名称，选中之后显示在框里 要求： 今天后端小哥哥要求选中之后，form表单提交时，select选择框同时传递两个值，即选中的人员姓名以及人员id。 实现： <el-form-item label="居住情况：" prop="liveTypeName"> <el-select v-model="ruleForm.liveTypeName
vue中form表单中的select
reembarkation的博客
04-21 1265
vue表单中使用select
Vue.js自定义选择组件vue-multi-select功能介绍及使用指南
`vue-multi-select` 是一个为Vue 2.0及以上版本设计的自定义组件，它允许在Vue项目中实现单选或多选的功能。通过该组件，用户可以方便地选择或取消选择一个或多个选项。 ### 安装与集成 根据给定的描述，安装`vue-...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值