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值。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue select组件绑定的值为数字类型遇到的问题

    目录 select组件绑定的值为数字类型问题 vue中的绑定值 学习重点 select组件绑定的值为数字类型问题 在日常开发中,我们双向绑定的form表单,经常会遇到对数字类型的绑定,但对于v-model 绑定的值,输入数字会自动转成字符串类型. 对于input输入框绑定的值,想要修改为数字类型很简单,只需要使用表单的修饰符就可以.如下所示 number 可以将绑定的 v-model 改为 number 类型 <input v-model.number="age" type=&q

  • vue关于select组件绑定的值为数字类型的问题

    目录 select组件绑定的值为数字类型问题 number可以将绑定的 v-model 改为 number类型 若元素属性需要绑定的值为数字时的处理 1.如果直接这样写 2.解决 select组件绑定的值为数字类型问题 在日常开发中,我们双向绑定的form表单,经常会遇到对数字类型的绑定,但对于v-model 绑定的值,输入数字会自动转成字符串类型. 对于input输入框绑定的值,想要修改为数字类型很简单,只需要使用表单的修饰符就可以. 如下所示: number可以将绑定的 v-model 改为

  • 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绑定对象时,回显内容不正确,始终是最后一项的解决

    vue el-select绑定对象时,回显内容不正确,始终是最后一项的解决

    目录 一.问题描述 二.原因分析和解决方法 三.总结 el-select绑定对象时,回显内容始终是最后一项 一.问题描述 使用el-select组件绑定类型为对象时,回显内容始终为选项的最后一项,但是通过控制台打印的信息却是所选项. 使用代码: <template>   <div class="page-index">     <el-form       :model="ruleForm"       :rules="rul

  • 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中echarts的用法及与elementui-select的协同绑定操作

    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的使用方法示例

    本文实例讲述了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项目之前后台联调之以数组作为参数传给服务端 一.要求 由于项目特殊要求,上传到知识库的文件,再点击保存按钮,保存至项目数据库. 由于上传多个文件,保存操作后台要求前端用数组作为参数传

随机推荐