淺談ElementUI中switch回調(diào)函數(shù)change的參數(shù)問題
更新時間：2018年08月24日 08:42:35 作者：kuweiMaster
今天小編就為大家分享一篇淺談ElementUI中switch回調(diào)函數(shù)change的參數(shù)問題，具有很好的價值，希望對大家有所幫助。一起跟隨小編過來看看吧
需求說明
八個switch組件,用同一個回調(diào)函數(shù)
switch組件狀態(tài)發(fā)生變化時需要知道它目前開關(guān)狀態(tài)
需要知道當前是哪個switch
問題描述
按照官方文檔對switch事件的描述
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---|---|---|
| change | switch 狀態(tài)發(fā)生變化時的回調(diào)函數(shù) | 新狀態(tài)的值 |
下面這樣寫可以滿足第二個需求,change回調(diào)函數(shù)中的參數(shù)callback就是開關(guān)當前的狀態(tài)值,默認是boolean類型,但是第三個需求還不能解決.
<el-switch
v-model="value1"
@change='changeStatus'>
</el-switch>
<script>
var vm = new Vue({
el: "#app",
data: {
value1: true
},
methods: {
change: function(callback){
console.log(callback);
}
}
})
</script>
解決辦法
下面代碼中的$event就是switch的當前狀態(tài)值,而num就是自定義的參數(shù)
<el-switch
v-model="value1"
@change='changeStatus($event,1)'>
</el-switch>
<el-switch
v-model="value2"
@change='changeStatus($event,2)'>
</el-switch>
<script>
var vm = new Vue({
el: "#app",
data: {
value1: true,
value2: false
},
methods: {
change: function($event,num){
console.log($event);
console.log(num);
}
}
})
</script>
拓展知識：基于element-ui（vue版）使用switch時change回調(diào)函數(shù)中的形參傳值問題
需求說明
有多個switch組件
需要知道switch的狀態(tài)
表格中當前行（scope.row）的數(shù)據(jù)
問題描述
官方文檔中對switch中change的描述：
目前能得到switch的狀態(tài)值，但是無法得到change回調(diào)中第二個形參的值
解決方法：
change回調(diào)函數(shù)默認形參的實參是$event,其它的實參傳自己需要的數(shù)據(jù)就ok
以上這篇淺談ElementUI中switch回調(diào)函數(shù)change的參數(shù)問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端多格輸入框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要為大家詳細介紹了vue上傳圖片組件的編寫代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了vue中的inject用法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue3中的執(zhí)行流程思路分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了Vue 實現(xiàn)雙向綁定的四種方法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了如何修改el-form-item 的label的字體顏色問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細介紹了Vue異步組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
vue 循環(huán)加載數(shù)據(jù)并獲取第一條記錄的方法
今天小編就為大家分享一篇vue 循環(huán)加載數(shù)據(jù)并獲取第一條記錄的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue2.0 axios前后端數(shù)據(jù)處理實例代碼
本篇文章主要介紹了vue2.0 axios前后端數(shù)據(jù)處理實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
Babel是一個JS編譯器,主要作用是將ECMAScript2015+ 版本的代碼,轉(zhuǎn)換為向后兼容的JS語法,以便能夠運行在當前和舊版本的瀏覽器或其它環(huán)境中,下面這篇文章主要給大家介紹了關(guān)于Vue中babel.config.js配置詳解的相關(guān)資料,需要的朋友可以參考下2023-02-02