ElementUI框架的switch开关绑定数据后，导致js里明明结果是1的值，却变为了0

一、遇到的问题（Bug）

1、PHP后端输出json数据如下：

echo '{
	"code": 1,
	"msg": "success",
	"count": 1,
	"data": [{
		"id": 1,
		"code": "ald777",
		"type": 0,
		"num": 10,
		"title": "开服豪礼",
		"content": "新人礼包",
		"start_time": "2023-11-04 13:50",
		"end_time": "2023-12-04 13:51",
		"status": 1
	}]
}';

2、switch开关代码：

<el-table-column prop="status" label="状态" align="center">
<template slot-scope="scope">
    <el-switch
        class="switchStyle"
        active-value="1"
        inactive-value="0"
        v-model="scope.row.status" 
        active-text="启用" 
        inactive-text="关闭"
        active-color="#1DD76D"
        inactive-color="#DCDFE6"
        @change="switchChange(scope.row.id,scope.row.status)">
    </el-switch>
</template>
</el-table-column>

3、$.ajax请求数据代码：

$.ajax({
    type: "GET",
    url: 'PHP后端请求数据地址',
    dataType: "json",
    contentType: "application/json;charset=UTF-8",
    success: function(res) {
        console.log(res.data);
    },
    error: function(error) {
        console.log("请求数据异常，Error：" + error);
    }
});

$.ajax请求到的结果如下：

从结果可以看出来，$.ajax请求获取到的status参数值是错的，正确的应该是1，但这里却变为了0

二、问题分析和解决

1、关于switch开关

switch开关经常用在是否启用的场合，但是switch默认绑定值的类型是布尔类型，即true和false，在实际的项目中，后端的接口都会用0和1来代替，那么在前端里，我们如何将数值与状态进行关联呢？

第一种情况：

我们可以用active-value绑定要启用状态的值，用inactive-value绑定禁用状态的值，这两个值默认对应的是字符串类型。

<el-table-column label="是否启用">
    <template slot-scope="scope">
        <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#cccccc"
            active-value="1"
            inactive-value="0"
            @change="changeStatus(scope.row.id)"
        >
        </el-switch>
    </template>
</el-table-column>

第二种情况：

如后端接口返回的status是数字类型的，需要加上动态绑定，代码如下：

<el-table-column label="是否启用">
    <template slot-scope="scope">
        <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#cccccc"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus(scope.row.id)"
        >
        </el-switch>
    </template>
</el-table-column>

2、解决方案

所以我们之前遇到的bug问题，主要是因为PHP后端接口返回的status是数字类型的，我们在使用switch开关时，没有进行动态绑定，才会导致出错。

好了，那么既然已经知道原因，只需要简单修改switch开关的代码即可，正确如下：

<el-table-column prop="status" label="状态" align="center">
<template slot-scope="scope">
    <el-switch
        class="switchStyle"
        :active-value="1"
        :inactive-value="0"
        v-model="scope.row.status" 
        active-text="启用" 
        inactive-text="关闭"
        active-color="#1DD76D"
        inactive-color="#DCDFE6"
        @change="switchChange(scope.row.id,scope.row.status)">
    </el-switch>
</template>
</el-table-column>