el-switch不能更改状态的原因

背景需求：使用el-switch做一个改变状态的操作，在职位库的列表中增加一个“设为优质职位”的操作，如果是优质职位，改字段isQuality的值为1，反之为0。

 

问题描述：数据库中的isQuality字段的值为1，但是在前端打印出来的时候是0，对应不上。

 

代码如下：

<el-table-column label="设为优质职位" width="160" align="center">
    <template slot-scope="scope">
        <el-switch
            @change="changeIsQuality(scope.row)"
            v-model="scope.row.isQuality"
            active-value="1"
            inactive-value="0">
        </el-switch>
    </template>
</el-table-column>

代码解析：

value / v-model

绑定值

boolean / string / number

active-value	switch 打开时的值	boolean / string / number	—	true
inactive-value	switch 关闭时的值	boolean / string / number	—	false

事件名称	说明	回调参数
change	switch 状态发生变化时的回调函数	新状态的值

scope.row代表当前行的数据

解决方案：

<el-table-column label="设为优质职位" width="160" align="center">
    <template slot-scope="scope">
        <el-switch
            @change="changeIsQuality(scope.row)"
            v-model="scope.row.isQuality"
            :active-value="1"
            :inactive-value="0">
        </el-switch>
    </template>
</el-table-column>

:inactive-value="0"

:active-value="1"

看到区别了吗？就是加没加冒号

原因：

vue el-switch 绑定数值时要用

<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>