el-checkbox遇到的问题
在官网中有实例
<template>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</template>
<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
data() {
return {
checkAll: false,
checkedCities: ['上海', '北京'],
cities: cityOptions,
isIndeterminate: true
};
},
methods: {
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
}
}
};
</script>
一般都是把el-checkbox放在el-checkbox-group里面进行循环的。
1:只能写@change事件而不能写@click。而且可以将这个事件加在el-checkbox-group上面。这样每次点击checkbox框变化它都能捕捉到。也可以放在el-checkbox上面这样点击时获取的是你当时点击的checkbox。
2:v-model上面的值是你checkbox的选中的值。v-model写在了checkbox-group上面,这样获取的就是循环的里面所有选中的,不是一条数组选中的。有了v-model就可以不用写:checked属性来决定他是否选中了。
遇到的问题:我在el-checkbox-group和el-checkbox都添加了@change事件,导致当我选中某一项值,el-checkbox的v-model的值没有变化。可能是无法判断浏览器到底执行了哪个事件。
解决:去掉el-checkbox-group
<div class="lesson-publish-checkbox">
<!--<el-checkbox-group v-model="checkedNumber[index]" @change="handleCheckedNumberChange($event,index)">-->
<el-checkbox v-for="student in cls.students" :key="student.studentId" :label="student.studentId"
-model="student.isPublished" :disabled="student.hasPublished" @change="studentCheckChange(cls)">{{student.studentName}}
</el-checkbox>
<!--</el-checkbox-group>-->
</div>
el-checkbox遇到的问题的更多相关文章
- TreeView htc 改写
call the function loadTree(treeviewId) when body is loaded <body onload="loadTree('tvSelect' ...
- EL和JSTL专题
EL简介 EL全名为Expression Language,它原本是JSTL 1.0为方便存取数据所自定义的语言.当时只能在JSTL标签中使用,如下: <c:out value="${ ...
- jQuery中的checkbox问题
一开始的代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- EL表达式Expression Language
表达式语言Expression Language目的:简化jsp代码 EL内置对象 1.pageContext2.pageScope3.requestScope4.sessionScope5.appl ...
- easyui combobox 带 checkbox
$('#cc').combobox({ url:'combobox_data1.json', method:'get', valueField:'id', textField:'text', pane ...
- Javascript实现CheckBox的全选与取消全选的代码(转)
js函数 复制代码 代码如下: <script type="text/javascript"> function checkAll(name) { var el = d ...
- easyui combobox 中实现 checkbox
$('#cc').combobox({ url:'combobox_data1.json', method:'get', valueField:'id', textField:'text', pane ...
- 实战1--应用EL表达式访问JavaBean的属性
(1)编写index.jsp页面,用来收集用户的注册信息 <%@ page language="java" pageEncoding="GBK"%> ...
- javaweb学习总结(三十)——EL函数库
一.EL函数库介绍 由于在JSP页面中显示数据时,经常需要对显示的字符串进行处理,SUN公司针对于一些常见处理定义了一套EL函数库供开发者使用. 这些EL函数在JSTL开发包中进行描述,因此在JSP页 ...
- ognl el表达式 property
<s:iterator value="list" status="statu" var="alarminfo"> <tr& ...
随机推荐
- 我也来----xia bi bi 一下----微信小程序
工作刚到一阶段 就看了看微信小程序 自己做了个小dome 主要是为了让我女朋友能够学习做菜! 然而悲催的发现我根本没有App ID 不说快了 直接上图 个人感觉开发起来还是很简单的. 对着AP ...
- ERP项目实施记录10
好久没有更新,因为进度一直拖着.已经实施了20个月了,很多东西没有开发出来.原因多方面的,虽然在此打算吐槽一下开发公司,但其实很大部分责任还是在我们自己. 不多说了,看图:
- Improved GAN
https://www.bilibili.com/video/av9770302/?p=16 从之前讲的basic gan延伸到unified framework,到WGAN 再到通过WGAN进行Ge ...
- Ubuntu 使用命令行连接无线网
一.查看可以使用的无线网: nmcli dev wifi 二.连接无线网: nmcli dev wifi connect ‘essid’(网络名称) password ‘password’(密码) 可 ...
- python摸爬滚打之day17----类与类之间的关系
1.类与类之间的联系 1.1 依赖关系 类A中使用了类B, 类B作为参数传进类A的方法中被使用. 这种关系中类与类之间的联系是最轻的. class Elephant: def open(self,e ...
- springboot中通过cors协议解决跨域问题
1.对于前后端分离的项目来说,如果前端项目与后端项目部署在两个不同的域下,那么势必会引起跨域问题的出现. 针对跨域问题,我们可能第一个想到的解决方案就是jsonp,并且以前处理跨域问题我基本也是这么处 ...
- Spring 学习教程(二): IOC/DI+AOP
1. IOC / DI Spring是一个基于IOC和AOP的结构J2EE系统的框架 IOC 反转控制 是Spring的基础,Inversion Of Control 简单说就是创建对象由以前的程序员 ...
- 使用scrapy入门教程
创建项目 scrapy startprogect demo 创建爬虫 scrapy genspider myDomain madomian.com 直接创建文件也可以 运行爬虫 scrapy craw ...
- 020-并发编程-java.util.concurrent之-jdk6/7/8中ConcurrentHashMap、HashMap分析
一.概述 哈希表(hash table)也叫散列表,是一种非常重要的数据结构,应用场景及其丰富,许多缓存技术(比如memcached)的核心其实就是在内存中维护一张大的哈希表. 是根据关键码值(Key ...
- Asp.net Core认证和授权:JWT认证和授权
JWT验证一般用户移动端,因为它不像cookie验证那样,没有授权跳转到登陆页面 JWT是json web token的简称,在 jwt.io 网址可以看到 新建一个API项目,通过postman ...