vue el-switch綁定數(shù)值時需要注意的問題
更新時間：2024年12月26日 09:19:12 作者：-小龍人
在Vue中使用`el-switch`組件時,綁定數(shù)值類型時應使用布爾值（true/false）,而綁定字符串類型時應使用字符串（'true'/'false'）
vue el-switch綁定數(shù)值問題
vue el-switch 綁定數(shù)值時要用
<el-switch v-model="value"
:active-value="1"
:inactive-value="0"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>vue el-switch 綁定String時要用
<el-switch v-model="value"
active-value="1"
inactive-value="0"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>el-switch 動態(tài)綁定想要的值
如果后端返回給你的數(shù)據(jù)不是true和false或者是1和2動態(tài)綁定怎么做？
<el-switch v-model="scope.row.isOpen" active-color="#13ce66" @change="SwitchChange(scope.row)" :active-value="1" :inactive-value="2"
inactive-color="#ff4949"></el-switch>
:active-value="1"/*開啟時的值*/
:inactive-value="2"/*關閉時的值*/
// 開關變化
SwitchChange(event) {
/*點擊時他會自動把你綁定的值變更，直接去請求數(shù)據(jù)就可以了*/
var parms = {
isOpen: event.isOpen,
id: event.id
}
SonList.Openclose(parms).then(res => {
this.$message({
message: res.msg,
type: 'success'
})
this.loading = false
this.getdata()
}).catch(error => {
this.loading = false
console.log(error)
})
console.log(event)
},
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue-resource 攔截器（interceptor）的使用詳解
本篇文章主要介紹了vue-resource 攔截器（interceptor）的使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
解決vue-router進行build無法正常顯示路由頁面的問題
下面小編就為大家分享一篇解決vue-router進行build無法正常顯示路由頁面的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
本篇文章主要介紹了Vue filter介紹及其使用詳解，VueJs 提供了強大的過濾器API，能夠?qū)?shù)據(jù)進行各種過濾處理。一起跟隨小編過來看看吧2017-10-10
el-elementUI使用el-date-picker選擇年月
本文主要介紹了el-elementUI使用el-date-picker選擇年月,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧2024-02-02
vue使用$store.commit() undefined報錯的解決
這篇文章主要介紹了vue使用$store.commit() undefined報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
Vuex 是 Vue.js 官方推薦的狀態(tài)管理庫之一，本文主要介紹了vue的狀態(tài)庫管理實現(xiàn)示例，具有一定的參考價值，感興趣的可以了解一下2024-04-04
解決Vue Loading PostCSS Plugin failed:Cann
這篇文章主要介紹了解決Vue Loading PostCSS Plugin failed:Cannot find module autoprefixer問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue如何自定義按鈕單選和多選問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要給大家介紹了關于Vue.js原理分析之nextTick實現(xiàn)的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
這篇文章主要介紹了vue路由傳參刷新后數(shù)據(jù)丟失問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03