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