element ui - el-select获取点击项的整个对象item

1.背景

在使用 el-select 的时候,经常会通过 change 事件来获取当前绑定的 value ,即对象中默认的某个 value 值。但在某些特殊情况下,如果想要获取的是点击项的整个对象 item,该怎么做呢?

2.实例

elementUI 中是可以支持获取点击项的整个对象的。

需注意 value-key="id" :value="item"

html 复制代码
<template>
  <el-select
    v-model="value"
    multiple
    v-model="obj" value-key="id" @change="change">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        value:'',
        options: [{
          id: 1,
          label: '黄金糕'
        }, {
          id: 2,
          label: '双皮奶'
        }, {
          id: 3,
          label: '蚵仔煎'
        }, {
          id: 4,
          label: '龙须面'
        }, {
          id: 5,
          label: '北京烤鸭'
        }],
        value1: [],
        value2: []
      }
    },
  methods: {
    change(item) {
      console.log(item);// 打印整个对象
    }
  }
  }
</script>

延伸:

vue.runtime.esm.js:619 [Vue warn]: <transition-group> children must be keyed: <ElTag>

在选择点击获取某个值是,"未选中",原因为:value-key="id" id的值为数值类型

value-key="''+id" 将数值类型转换为字符串类型即可

相关推荐
用户785127814701 小时前
从 0 到 1 落地淘宝商品 API 开发:手把手教你采集、分析与避坑(含完整可运行代码)
vue.js
鸿Hong3 小时前
从事Vue开发之查漏补缺:深度选择器
vue.js
小小前端_我自坚强3 小时前
vue提高技术 高级语法相关
前端·vue.js·前端框架
小小前端_我自坚强3 小时前
Vue 3 使用心得
前端·javascript·vue.js
Keepreal4964 小时前
使用Canvas绘制转盘
javascript·vue.js·canvas
ScriptBIN4 小时前
Javaweb--Vue
前端·vue.js
前端Hardy4 小时前
Vue 高效开发技巧合集:10 个实用技巧让代码简洁 50%+,面试直接加分!
前端·javascript·vue.js
@大迁世界8 小时前
第03章: Vue 3 组合式函数深度指南
前端·javascript·vue.js·前端框架·ecmascript
二十雨辰8 小时前
vite与ts的结合
开发语言·前端·vue.js
我是日安8 小时前
从零到一打造 Vue3 响应式系统 Day 25 - Watch:清理 SideEffect
前端·javascript·vue.js