居然被vue中的冒号坑了必须总结

本文链接：https://blog.csdn.net/qq_42584411/article/details/126370710

场景描述:

根据后台传值动态显示开关（0为关，1为开），对开关进行操作时请求后台，需要传两个参数：ID，State

需求描述：

我先说我的需求，我想在列表的每一条添加一个开关，可以改当前一条数据的状态，并发送到服务端，并根据服务端返回的结果局部刷新当前一条数据

但是在做的过程中出现了一些问题，这个确实是前端学艺不精。。导致的，先看问题

我是这样去写的代码

<template v-slot:state="slotData">
       <el-switch v-model="slotData.data.vo.state" active-value="1" inactive-value="0"
                        @change="handleEnable(slotData.data)">
      </el-switch>
</template>

然后后端传过来的是一个interger类型的0，1，但是奇怪了，始终映射不上而且出现
slotData.data.vo.state的状态都是0的情况于是程序中质检，看看究竟是哪里出现了问题，，，

<template v-slot:state="slotData">
                {{slotData.data.vo.state}}
                    <el-switch v-model="slotData.data.vo.state" active-value="1" inactive-value="0"
                        @change="handleEnable(slotData.data)">
                    </el-switch>
                </template>

在这里插入图片描述
这里发现数据都变成了0，是我后端接口的问题吗？并没有控制台上看后端返回的数据是正常的

于是就开始思考。。。因为用了框架问前端的小姐姐说它并没有变化数据。。

于是开始看elementUI的文档，才找到解决办法

究其原因:

Swich默认是boolean类型，而后台传值为number类型

请注意以面的写法，active-value和inactive-value的值分别是字符串的0和1,如果你赋值为数字类型的 0 或 1是无法正常工作的，若赋值为数值类型，需这样写：

<template v-slot:state="slotData">
     <el-switch v-model="slotData.data.vo.state" :active-value="1" :inactive-value="0"
                        @change="handleEnable(slotData.data)">
    </el-switch>
</template>