vue select change事件如何传递自定义参数

目录
  • select change事件传递自定义参数
  • @change函数传自定义参数
    • 实例

select change事件传递自定义参数

今天记录一个小问题，最近get到的一个方法，不太常用，记录一下，增强记忆吧。

之前在vue项目中，也经常使用select标签，也经常用change事件，经常用的change事件中，一直有个默认参数，就是选中的选项的信息，最近一个需求除了需了选中项信息外，还需要其他的参数。

今天记录一下这种传参方式，直接上代码。

// 普通用法，没有自定义参数
@change="handleChange"
handleChange (event) {
    // event.target.value 是change事件默认传的信息
    console.log(event.target.value)
}
// 需要传自定义参数时
@change="handleChange($event, '自定义参数')"
handleChange (event, param) {
    // event.target.value 是change事件默认传的信息
    // param 是自定义的参数
}

@change函数传自定义参数

在vue项目中，某些场景中CheckBox等一些组件的@change函数需要传一些自定义参数

实例

<el-checkbox label="hello" v-model="helloNum" @change="changeFunc($event,'自定义参数')" ></el-checkbox>
methods: {
    changeFunc(val,'自定义参数') {
        console.log(val,'自定义参数')
        //打印结果是：true/false ,'自定义参数'
    }
}

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

赞 (0)

相关推荐

  • element-ui中select组件绑定值改变,触发change事件方法

    1.安装vuecli脚手架 2.终端输入 cnpm i element-ui -S 安装element-ui 3.按需引入select组件 在main.js中写入如下代码 /* 导入第三方库开始 */ import 'element-ui/lib/theme-chalk/index.css'; // 按需加载Select组件 import {Select,Option,Dialog,Button} from 'element-ui' Vue.use(Select) Vue.use(Option)

  • vue 项目@change多个参数传值多个事件的操作

    vue 项目@change多个参数传值多个事件的操作

    首先是只有一个change事件 changelevel()//选择值 若想改变select同时改变row里的值 多个事件用:分割开来 此时发现changelevel()不执行那么加上()呢 changelevel(val){ console.log(val) => //undefined} 表示未传参数 输出undefined 那么要传值传谁呢 传入$event 再次输出就可获取选择值 补充:element-ui @change添加自定义参数 element-ui的change事件默认参数是一个

  • 解决vue elementUI 使用el-select 时 change事件的触发问题

    如下所示: <el-select v-model="level" size="mini" placeholder="请选择" :change="selectChange()"> <el-option v-for="item in select" :key="item.value" :label="item.label" :value="it

  • vue select change事件如何传递自定义参数

    目录 select change事件传递自定义参数 @change函数传自定义参数 实例 select change事件传递自定义参数 今天记录一个小问题,最近get到的一个方法,不太常用,记录一下,增强记忆吧. 之前在vue项目中,也经常使用select标签,也经常用change事件,经常用的change事件中,一直有个默认参数,就是选中的选项的信息,最近一个需求除了需了选中项信息外,还需要其他的参数. 今天记录一下这种传参方式,直接上代码. // 普通用法,没有自定义参数 @change="

  • element-ui组件中input等的change事件中传递自定义参数

    以select为例,如果select写在循环里,触发change事件时可能不只需要传递被选中项的值,还要传递index过去,来改变同一循环中的其他标签的状态. 下面这样写是无效的: @change="changeStatus(val, index)" <div v-for="(item,index) in itemList"> <el-select v-model="item.value" @change="chang

  • vue 实现click同时传入事件对象和自定义参数

    vue 实现click同时传入事件对象和自定义参数

    仅仅传入自定义参数 HTML <div id="app"> <button @click="tm(123)">ddddd</button> </div> JS代码 new Vue({ el:'#app', methods:{ tm:function(e){ console.log(e); } } }) 仅仅传入事件对象 HTML <div id="app"> <button @cl

  • Vue中传递自定义参数到后端、后端获取数据并使用Map接收参数

    目录 1.未进行二次封装之前的操作 1.1 前端调用接口设计 1.2 后端接口设计 2.使用二次封装axios后的设计 2.1 封装的接口类型(只展示关键的接口调用部分) 2.2 前端调用接口设计 2.3 后端接口设计 3.友情提示 4.效果展示 在对axios进行二次封装的时候.为了统一接口的设计.有些传递的参数是直接拼接到URL地址栏中的.但是为了统一管理.不能将传递的参数直接拼接到地址栏中.如何自定义传递的参数到后端,后端如何获取到这些自定义的参数?如果解决这一问题,我就能随便传递参数,不

  • Vue的指令中实现传递更多参数

    目录 概要 基本原理 基于闭包的扩展方案 实例和代码实现 Main.js中将指令对应的插件全局化 ImageLoad插件定义 图片加载管理类的定义 Vue 3.0的实现 概要 我们在使用Vue的开发项目中,经常用自定义指令(directive)来封装一系列的DOM操作,这样做非常方便.一般来说,指令是使用动态指令参数来获取App中的数据. 但是有些时候,自定义指令需要更多的数据来完成更复杂的功能,例如在指令中调用当前App实例的nextTick方法,以确保所有DOM元素加载完成,再进行DOM操作

  • vue中的el-tree @node-click传自定义参数

    vue中的el-tree @node-click传自定义参数

    目录 el-tree @node-click传自定义参数 给el-tree添加自定义图标 el-tree @node-click传自定义参数 <el-tree node-click="(data, node, item) => nodeClick(data, node, item, param)"></el-tree> nodeClick(data, node, item, param) {     console.log(data)   // data,

  • vue中get请求如何传递数组参数的方法示例

    前言: vue中在与后端进行数据交互时,使用axios发送请求,不做配置直接使用get请求传递数组类型参数的时候,后端是无法接收数据的,需要对axios一些简单的配置才能让后端完美的接收数组 1.问题 示例代码 let params = { statusList: ['OVERDUE', 'DELAY'] } this.$http.get('/list', params) .then(res => {}) .catch(e => {}) 上述代码在不做配置的时候请求信息为:/list?stat

  • vue中的get方法\post方法如何实现传递数组参数

    vue中的get方法\post方法如何实现传递数组参数

    目录 get方法\post方法如何传递数组参数 第一部分:vue中get方法如何传递数组参数 下面列出我的接口格式及解决方法的源码 vue get与post传参方式 1.post:用data传递参数 2.get:用params传递参数 3.delete:params传递参数 get方法\post方法如何传递数组参数 背景:项目中突然来了一个post方法传array数组的参数,且该数组参数是循环遍历所有元素按照get方法传参形式进行参数传递的,对于小白的我真的是一个打击呀.但是为了完成任务不能放弃

  • 浅谈jQuery中Ajax事件beforesend及各参数含义

    Ajax会触发很多事件. 有两种事件,一种是局部事件,一种是全局事件: 局部事件:通过$.ajax来调用并且分配. $.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // Handle the complete event } // ... }); 全局事件,可以用bind来绑定,用unbind来取消绑定.这个跟click/mousedown/keyup等事件类似.但他

  • vue中formdata传值给后台时参数为空的问题

    vue中formdata传值给后台时参数为空的问题

    目录 formdata传值给后台时参数为空 使用formData时候传递参数是个空值的情况 formData用途 使用formData 具体表单的操作API formdata传值给后台时参数为空 在vue里面使用formData的时候参数值为空,是因为axios是进行了二次封装,所以传递表达的时候会传递一个空表单过去 axios在进行二次封装的时候回影响到原来的表单提交或者文件上传, 所以可以用原生的发请求 // list 是一个对象数组 export const orinCatelogue =

随机推荐