• 中文
    • English
  • 注册
    • 查看作者
    • 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请求到的结果如下:

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

      从结果可以看出来,$.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>

    • 0
    • 0
    • 0
    • 163
    • 请登录之后再进行评论

      登录
    • 返回顶部
    • 做任务
    • 实时动态
    • 偏好设置
    • 到底部
    • 单栏布局 侧栏位置: