SoFunction
Updated on 2025-04-11

Issues that need to be paid attention to when binding values ​​by vue el-switch

Vue el-switch binding numerical problem

vue el-switch to use when binding a value

<el-switch v-model="value"
     :active-value="1"
     :inactive-value="0"
     active-color="#13ce66" 
     inactive-color="#ff4949">
</el-switch>

vue el-switch to use when binding String

<el-switch v-model="value"
     active-value="1"
     inactive-value="0"
     active-color="#13ce66" 
     inactive-color="#ff4949">
</el-switch>

el-switch dynamically bind the desired value

What if the data returned by the backend to you is not true and false or 1 and 2 dynamic binding?

&lt;el-switch v-model="" active-color="#13ce66" @change="SwitchChange()" :active-value="1" :inactive-value="2"
inactive-color="#ff4949"&gt;&lt;/el-switch&gt;

:active-value="1"/* value when enabled*/
:inactive-value="2"/* Value when closed*/

  // Switch changesSwitchChange(event) {
    /* When clicking, it will automatically change the value you bound, just go directly to request data*/
    var parms = {
        isOpen: ,
        id: 
    }
    (parms).then(res =&gt; {
        this.$message({
            message: ,
            type: 'success'
        })
         = false
        ()
    }).catch(error =&gt; {
           = false
          (error)
      })
        (event)
    },

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.