Vue 90 ,Element 13 ,Vue + Element UI 中 el-switch 使用小细节解析,避免入坑(获取后端的数据类型自动转变)

目录

前言
[在开发过程中,我们经常遇到一些看似简单的问题,但有时正是这些细节问题让我们头疼不已。今天,我就来和大家分享一个我在开发过程中遇到的 el-switch 使用的小坑,希望大家在使用时能够避免。](#在开发过程中,我们经常遇到一些看似简单的问题,但有时正是这些细节问题让我们头疼不已。今天,我就来和大家分享一个我在开发过程中遇到的 el-switch 使用的小坑,希望大家在使用时能够避免。)
[一. 问题背景](#一. 问题背景)
[二. 问题分析](#二. 问题分析)
[三. 问题重现](#三. 问题重现)
[1. 问题表现](#1. 问题表现)
[2. 解决过程](#2. 解决过程)
[解决方案 1:使用数字类型的 active-value 和 inactive-value](#解决方案 1:使用数字类型的 active-value 和 inactive-value)
[解决方案 2:强制转换 isStruct 字段为数字](#解决方案 2:强制转换 isStruct 字段为数字)
[3 问题总结](#3 问题总结)
[4. 最后的思考](#4. 最后的思考)

前言

在开发过程中,我们经常遇到一些看似简单的问题,但有时正是这些细节问题让我们头疼不已。今天,我就来和大家分享一个我在开发过程中遇到的 el-switch 使用的小坑,希望大家在使用时能够避免。

一. 问题背景

在某个 Vue 项目中,我需要使用 el-switch 组件来表示一个 isStruct 字段的开关状态。原本的需求是:当 isStruct 的值为 1 时,表示开启状态;当 isStruct0 时,表示关闭状态。然而,在实现过程中,虽然在后端接口中 isStruct 返回的是数字类型(10),但在前端界面中,开关的状态显示异常------不但切换状态不准确,而且最终的 isStruct 字段也变成了字符串 "0""1",而不是期望的数字。

这个问题导致了前端显示的状态与实际数据不一致,严重影响了用户体验,且在调试过程中,问题并不明显,直到打印数据才发现数据类型发生了变化。


二. 问题分析

首先,我们需要明确 el-switch 的工作原理。在 Vue 中,v-model 是用来实现双向数据绑定的。当我们使用 el-switch 组件时,它会根据 active-valueinactive-value 的值来决定切换的状态。v-model 会绑定到指定的字段(在此例中为 scope.row.isStruct),并在切换时修改其值。

问题的根本原因在于 el-switch 组件的 active-value 和 inactive-value 属性的类型处理。如果你设置了 active-value="1" 和 inactive-value="0",这两个值是写死的,而且默认是字符串类型,那么 v-model 绑定的 isStruct 就会变成字符串 "1" 或 "0",而不是数字 1 或 0。 这时,也会导致获取的 isStruct 数据类型发生变化,而我们期待的是一个数字类型的值,这就导致了数据不一致和展示错误。


三. 问题重现

让我们看看原始代码和最终出现的问题:

html 复制代码
<el-table-column min-width="12%" label="是否开启视频结构化">
  <template slot-scope="scope">
    <!-- 设置了 active-value 和 inactive-value 为字符串 -->
    <el-switch 
      v-model="scope.row.isStruct" 
      active-value="1" 
      inactive-value="0"
      active-color="#13ce66" 
      inactive-color="#ff4949">
    </el-switch>
  </template>
</el-table-column>

在这个代码中,我们通过 v-model="scope.row.isStruct" 双向绑定了 isStruct 字段,而 active-value="1"inactive-value="0" 被设置为字符串类型。虽然我们希望 10 表示数字,但在实际执行时,它们会被 Vue 内部转换为字符串,从而导致了开关的状态无法正确显示。

1. 问题表现

  • scope.row.isStruct 的值为数字 1 时,开关并没有显示为开启状态;
  • scope.row.isStruct 的值为数字 0 时,开关没有正确显示为关闭状态;
  • 通过 v-model 绑定的 scope.row.isStruct 的值也被自动转换成了字符串 "1""0"

2. 解决过程

解决方案 1:使用数字类型的 active-valueinactive-value

解决问题的第一步,就是确保 el-switch 组件的 active-valueinactive-value 的值是数字类型,而不是字符串。我们可以将 active-value="1"inactive-value="0" 改成数字类型:

html 复制代码
<el-table-column min-width="12%" label="是否开启视频结构化">
  <template slot-scope="scope">
    <!-- 使用数字类型的 active-value 和 inactive-value -->
    <el-switch 
      v-model="scope.row.isStruct" 
      :active-value="1" 
      :inactive-value="0"
      active-color="#13ce66" 
      inactive-color="#ff4949">
    </el-switch>
  </template>
</el-table-column>

通过这种方式,el-switch 会根据数字 10 来设置开关状态,确保 v-model 绑定的数据始终是数字类型,从而避免了字符串转换的问题。

解决方案 2:强制转换 isStruct 字段为数字

尽管我们修改了 el-switchactive-valueinactive-value,但为了保证数据一致性,最好在接收到后端数据时,强制将 isStruct 字段转换为数字类型。这样可以避免在其他地方出现字符串 "1""0" 的问题。

javascript 复制代码
const data = res.rows.map(item => ({
  ...item,
  isStruct: Number(item.isStruct)  // 强制转换为数字
}));
this.tableData = data;

这样处理之后,我们就确保了无论后端返回的数据是字符串 "1""0",都能够转换为数字类型 10,保持一致性。

3 问题总结

  1. 问题原因: el-switch 组件的 active-valueinactive-value 默认是字符串类型,因此在绑定 v-model 时,数据类型发生了不期望的转换,导致获取初始数据 isStruct 的值变成了字符串 "0""1",而不是数字。刚开始还以为是后端问题,记录,避免入坑。

  2. 解决方案:

    • 第一步: 使用动态的数字类型的 :active-value 和 :inactive-value,避免字符串类型的自动转换。
    • 第二步: 在接收到后端数据后,强制将 isStruct 字段转换为数字类型,确保数据一致性。
  3. 最佳实践: 在处理 Vue 组件的 v-model 双向绑定时,要特别注意数据类型的一致性。尤其是在涉及到开关、选择框等组件时,active-valueinactive-value 的数据类型应该与 v-model 绑定的数据类型一致。

4. 最后的思考

虽然这个问题看似简单,但它提醒我们在前端开发中,很多细节都需要细心处理。数据类型的不一致往往会导致许多意想不到的错误,因此在绑定数据时,我们要时刻保持警觉,确保数据的一致性和类型的正确性。希望这篇博客能帮助你避开类似的坑,提升开发效率。

相关推荐
腾讯TNTWeb前端团队6 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom11 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom11 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试