vue中的select绑定多个值
目录
- vue select绑定多个值
- vue el-select 绑定id值
vue select绑定多个值
不再通过v-model和value进行绑定
而是通过绑定索引值Index
然后通过定义@input=change方法,通过索引值获取并更新想要绑定的多个值
<el-select v-model="basic_info.itemindex" placeholder="" @input="change"> <el-option v-for="(item,index) in categoryList" :key=index :label="item.categoryName" :value="index" /> </el-select>
change(index) { this.basic_info.categoryCode = this.categoryList[index].categoryCode this.default_return_value = this.categoryList[index].defaultReturnValue },
vue el-select 绑定id值
在实际需求中,el-select的数组选项有多个,展示给用户选择的是每个选项的文本,但是传给后台的数据需要文本对应的id
比如选项数组是:applyTypeList:[{id:1,label:‘甜品’},{id:2,label:‘烧烤’}]
下拉框可选的是甜品和烧烤,但是我们需要记录的不是甜品和烧烤,而是他们对应的id的值,此时就需要绑定id值。
HTML
<el-select v-model="applyType" placeholder="申请类型" clearable> <el-option v-for="item in applyTypeList" :key="item.id" :value="item.id" :label="item.label"></el-option> </el-select>
绑定后,applyType会根据用户的选择而变化成不同的id值。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
vue关于select组件绑定的值为数字类型的问题
目录 select组件绑定的值为数字类型问题 number可以将绑定的 v-model 改为 number类型 若元素属性需要绑定的值为数字时的处理 1.如果直接这样写 2.解决 select组件绑定的值为数字类型问题 在日常开发中,我们双向绑定的form表单,经常会遇到对数字类型的绑定,但对于v-model 绑定的值,输入数字会自动转成字符串类型. 对于input输入框绑定的值,想要修改为数字类型很简单,只需要使用表单的修饰符就可以. 如下所示: number可以将绑定的 v-model 改为
-
vue里面的el-select绑定默认值方式
目录 vue的el-select绑定默认值 el-select绑定的值无法选中el-option问题 vue的el-select绑定默认值 vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当给select绑定了v-model的值的时候,要给v-model绑定的data值里写默认值 el-select绑定的值无法选中el-option问题 框架vue
-
Vue select 绑定动态变量的实例讲解
概述 根据后台的数据生成多个select,由于数据的数量不定,所以v-model绑定的变量名也不定.所以通过数据的id或者下标进行变量拼接.页面能够成功渲染,但是当进行下拉框的选值时,组件不刷新,选中的结果并没有展示 Code <div v-for="(item, index) in tagAllDate" :key="index"> <el-form-item :label="item.name"> <el-sel
-
vue el-select绑定对象时,回显内容不正确,始终是最后一项的解决
目录 一.问题描述 二.原因分析和解决方法 三.总结 el-select绑定对象时,回显内容始终是最后一项 一.问题描述 使用el-select组件绑定类型为对象时,回显内容始终为选项的最后一项,但是通过控制台打印的信息却是所选项. 使用代码: <template> <div class="page-index"> <el-form :model="ruleForm" :rules="rul
-
vue select组件绑定的值为数字类型遇到的问题
目录 select组件绑定的值为数字类型问题 vue中的绑定值 学习重点 select组件绑定的值为数字类型问题 在日常开发中,我们双向绑定的form表单,经常会遇到对数字类型的绑定,但对于v-model 绑定的值,输入数字会自动转成字符串类型. 对于input输入框绑定的值,想要修改为数字类型很简单,只需要使用表单的修饰符就可以.如下所示 number 可以将绑定的 v-model 改为 number 类型 <input v-model.number="age" type=&q
-
vue中echarts的用法及与elementui-select的协同绑定操作
1.vue中echarts的使用 引入echarts后 let myChart = echarts.init(document.getElementById('dsm'));//dsm为绑定的dom结构 var option = { //backgroundColor:"#111c4e", tooltip: { trigger: 'axis' }, legend: { //图表上方的图例显隐 data:['光合有效辐射'], textStyle: { color: '#fff' } }
-
vue中的select绑定多个值
目录 vue select绑定多个值 vue el-select 绑定id值 vue select绑定多个值 不再通过v-model和value进行绑定 而是通过绑定索引值Index 然后通过定义@input=change方法,通过索引值获取并更新想要绑定的多个值 <el-select v-model="basic_info.itemindex" placeholder="" @input="change"> <el-
-
浅谈vue的几种绑定变量的值 防止其改变的方法
1.Object.freeze(obj)语句 obj={ foo:"nan" } Object.freeze(obj); 用该语句固定变量后,之后对这个变量的更改都会无效,并在console中报错. 2.v-once元素绑定 <span>{{msg}}</span> 当msg数据改变之后span的内容也会当即发生改变,但是如果 <span v-once>{{msg}}</span> 如果加上了v-once绑定那么就算数据中的msg改变sp
-
element-ui中的select下拉列表设置默认值方法
element-ui中的select下拉列表如何设置默认值? 在element-ui的运用中,涉及到了select下拉列表.项目中需要将select的默认值给展示出来 那如何修改呢? 上element-ui中的代码片段 <template> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key=&qu
-
vue中动态select的使用方法示例
本文实例讲述了vue中动态select的使用方法.分享给大家供大家参考,具体如下: html代码如下: 通过v-model可以获取到选中的值,如果没值就默认第一个;如果有值就显示有值的那个内容 <template> <div class="violationsList"> <div class="type-select"> <select name="selected" id="" v
-
在Vue中使用Select选择器拼接label的操作
我就废话不多说了,大家还是直接看代码吧~ <el-form-item label="货道商品" prop="productid"> <el-select v-model="form.productid" filterable placeholder="请选择" @change="changeselect"> <el-option v-for="item in mypr
-
vue中view-model双向绑定基础原理解析
利用Object.defineProperty进行数据劫持 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue
-
Vue中的循环及修改差值表达式的方法
一.Vue中的循环 v-for 常见的4总情况 #第一种 <div v-for="item in items"></div> #第二种 <div v-for="(item, index) in items"></div> #第三种 <div v-for="(val, key) in object"></div> #第四种 <div v-for="(val, n
-
在vue中使用vuex,修改state的值示例
1. 安装 vuex npm install vuex -S 2.在目录下创建store文件 3. 在store.js编辑一个修改state的方法 然后在mian.js中全局引入 最后在组件中使用 这个的功能是运用mutations 修改state中的值 以上这篇在vue中使用vuex,修改state的值示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
Vue中通过属性绑定为元素绑定style行内样式的实例代码
1.直接在元素上通过:style的形式,书写样式对象 <h1 :style="{color:'red','font-weight':200}">这是一个H1</h1> 2.将样式对象定义在data中,并直接引用到:style中 1:在data上定义样式 data:{ styleObj1:{color:'blue','font-weight':200,'font-size':'40px'}, } 2:在元素中,通过属性绑定的形式,将样式对象应用到元素中 <h
-
在vue中给后台接口传的值为数组的格式代码
比如你要传的数组是在data中的return中的params中的Arrays.传值格式需要如下: {flag: 1, data: this.params.Arrays} 如果要求是json格式,记得后面要加 {headers:{'Content-Type': 'application/json'}} 补充知识:vue项目之前后台联调之以数组作为参数传给服务端 一.要求 由于项目特殊要求,上传到知识库的文件,再点击保存按钮,保存至项目数据库. 由于上传多个文件,保存操作后台要求前端用数组作为参数传
随机推荐
- Spring整合Quartz实现定时任务调度的方法
- vue货币过滤器的实现方法
- asp.net mvc4中bootstrap datetimepicker控件的使用
- 分享java打印简单图形的实现代码
- IOS 时间和时间戳之间转化示例
- Python3中的2to3转换工具使用示例
- Python中splitlines()方法的使用简介
- ASP.NET过滤类SqlFilter,防止SQL注入 原创
- php实现将数组转换为XML的方法
- Jquery插件实现点击获取验证码后60秒内禁止重新获取
- php下MYSQL limit的优化
- Python 比较两个数组的元素的异同方法
- 理解PHP5中static和const关键字的区别
- JS中利用localStorage防止页面动态添加数据刷新后数据丢失
- JQuery遍历DOM节点的方法
- jquery tab插件精简版分享
- Android实现带描边的圆角图片
- python根据unicode判断语言类型实例代码
- springboot 注册服务注册中心(zk)的两种方式详解
- 你应该知道的States字段使用规范