vue el-switch綁定數(shù)值時需要注意的問題
更新時間：2024年12月26日 09:19:12 作者：-小龍人
在Vue中使用`el-switch`組件時,綁定數(shù)值類型時應(yīng)使用布爾值（true/false）,而綁定字符串類型時應(yīng)使用字符串（'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"/*關(guān)閉時的值*/
// 開關(guān)變化
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)
},
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue 3 的 Composition API 帶來了強大的 reactive 函數(shù),它允許你在 Vue 應(yīng)用程序中創(chuàng)建響應(yīng)式數(shù)據(jù),本文我們將深入探討 Vue 3 的 reactive,并提供一些注意事項和解決方案,希望可以幫助打更好地使用它2023-11-11
vue項目中在可編輯div光標(biāo)位置插入內(nèi)容的實現(xiàn)代碼
這篇文章主要介紹了vue項目中在可編輯div光標(biāo)位置插入內(nèi)容的實現(xiàn)代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
vue父組件向子組件(props)傳遞數(shù)據(jù)的方法
這篇文章主要介紹了vue父組件向子組件(props)傳遞數(shù)據(jù)的方法,文中給大家補充介紹了vue父子組件間傳值(props)的實現(xiàn)代碼，需要的朋友可以參考下2018-01-01
vuex通過getters訪問數(shù)據(jù)為undefined問題及解決
這篇文章主要介紹了vuex通過getters訪問數(shù)據(jù)為undefined問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue的rules驗證失效,部分可以部分又失效,很多百度都有,但是我這里遇到了一個特別的,那就是prop沒有寫全,導(dǎo)致驗證某一個失效,接下來就跟小編一起來看看這個失效的原因和解決方案吧2023-11-11
這篇文章主要為大家介紹了Vue組件實現(xiàn)景深卡片輪播示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
最近一直在做的項目是Vue2搭建的項目，本文主要介紹了Vue全局自定義指令Modal拖拽的實踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了使用Vant完成通知欄Notify的提示操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue-element-admin后臺生成動態(tài)路由及菜單方法詳解
vue-element-admin后臺管理系統(tǒng)模板框架 是vue結(jié)合element-ui一體的管理系統(tǒng)框架,下面這篇文章主要給大家介紹了關(guān)于vue-element-admin后臺生成動態(tài)路由及菜單的相關(guān)資料,需要的朋友可以參考下2023-09-09
這篇文章主要為大家介紹了vue?element樹形控件實現(xiàn)樹形表格，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11