el-switch组件v-model对于scope不生效问题

​

简介

今天自己在家帮老婆做一个排课系统，前端用的是vue语言，使用的Element-UI框架，遇到了在el-switch中使用v-model绑定scope不生效的问题，最后查询好久资料得以解决

看来还是自己的前端太薄弱了，把问题的解决方式转载了下来，记录在这里。如下是转载来源：

作者：小白的踩坑日常
链接：https://www.jianshu.com/p/852bcd558055
来源：简书

1. 问题定位

element中switch v-model绑定的值为数字类型情形

在用到el-switch组件时，需要绑定数据为number类型，但总也绑不成功
element官方文档上说：设置该组件的active-value和inactive-value属性，可接受Boolean, String或Number类型的值。

2. 解决方法

找的解决办法：
1，使用number将绑定的v-model改为number类型

<el-switch
        active-value=1
        inactive-value=0
        v-model.number=scope.row.locked>
</el-switch>

这样没用，连switch按钮都绑定不上去

2、后来发现，当value为Number类型的时候active-value和inactive-value前边必须加：单项绑定一下才可以。
而active-value和inactive-value等号后边的值得引号是可有可无的。

<el-switch
      :active-value=1
      :inactive-value=0
      v-model="scope.row.locked">
</el-switch>

3. 原理分析

Vue中的数据绑定

绑定数据有三种方式：

• 插值，也就是的形式，以文本的形式和实例data中对应的属性进行绑定
• v-bind
• v-model
  v-bind
  eg：v-bind:class 可简写为 :class

当加上v-bind:之后，它的值classe不是字符串，而是vue实例对应的data.classed的这个变量。也就是说data.classed是什么值，它就会给class属性传递什么值，当data.classed发生变化的时候，class属性也发生变化，这非常适合用在通过css来实现动画效果的场合。他只是单向变动

v-bind支持的类型：

• html中的属性
• css的样式
• 对象
• 数组
• number 类型
• bool类型

v-bind使用：

// 绑定文本
<p v-bind="message"></p>

// 绑定属性
<p v-bind:src="http://...."></p>
<p v-bind:class="http://...."></p>
<p v-bind:style="http://...."></p>

// 绑定表达式
:class{className:true}

v-model：
主要是用在表单元素中，它实现了双向绑定。在同事使用v-bind和v-model中，v-model建立的双向绑定对输入型元素input, textarea, select等具有优先权，会强制实行双向绑定。很多时候v-model使用在表单的中实现双向绑定。

<input v-model="something">

本文作者： 夏军谊
本文链接： https://www.xiajunyi.com/pages/p89.html
版权声明：本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！

赏

打赏看心情，只愿有帮助

支付宝

微信