首页 > 其他分享 >记一次el-checkbox包裹一层div,点击div勾选复选框,点击复选框却没反应的bug

记一次el-checkbox包裹一层div,点击div勾选复选框,点击复选框却没反应的bug

时间:2023-12-27 11:55:24浏览次数:29  
标签:checkbox 勾选 复选框 item 点击 div

<div
  class="account-item"
  v-for="item in accountList"
  :key="item.id"
  :class="[
    { 'is-select-mode': isSelectMode },
    { 'is-select': item.isSelect }
  ]"
  @click="selectItemClick(item)"
>
  <el-checkbox
    v-if="isSelectMode"
    v-model="item.isSelect"
    label=""
    size="large"
    @click.stop="stopEvent"
  />
  <svg-icon class="svg-icon" icon="icon-custom"></svg-icon>
  <div class="account-content">
    <div class="name">{{ item.name }}</div>
    <div class="phone">{{ item.phone }}</div>
    <div class="email">{{ item.email }}</div>
    <div class="address">{{ item.address }}</div>
  </div>
</div>

点击div时,点击div取消,勾选复选框是正常的,但是点击复选框却失效,这是由于冒泡,相当于改了两次checked的值,造成值没变,只需要给checkbox的点击事件取消冒泡就可以了。

 

标签:checkbox,勾选,复选框,item,点击,div
From: https://www.cnblogs.com/guwufeiyang/p/17930264.html

相关文章

  • 点击窗口
    算法思想:将窗口信息按顺序存入vector(从底层到顶层),每次点击屏幕,从顶层到底层搜索点击到了哪个窗口。将该窗口从vector中删除再重新加入,相当于该窗口变成最顶层,其余窗口顺序没有改变。主要/核心函数分析:voidclick(intx,inty,vector<window>&wins)每次点击屏幕,从顶层到底层搜......
  • 金蝶云表单【表单插件】---物料新增按钮点击自动获取老系统中对应的物料信息20231226
    金蝶云需求:1、物料新增时,通过快捷方式自动获取老系统K3Wise中对应物料的相关信息;2、具体相关对应物料字段项信息,由存储过程:execpro_lyh_get_oldsystemwlxx'002'来查询结果;usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Text;usingSyste......
  • codeforces刷题(1100):1904B_div2
    B、CollectingGame跳转原题点击此:该题地址1、题目大意  获得一个由n位正整数组成的数组。你可以选择选择任意一个数作为你的判断值。然后任意一个\(\le\)它的数可以被选中加入你的分数(注意判断值不算在里面),同时该数被移除数组。你的任务是,对于该数组中的每个数,都将其作为......
  • codeforces刷题(1100):1905B_div2
    B、Begginer'sZelda跳转原题点击此:此题地址1、题目大意  给你一个子树,你可任意选择两个节点\(u、v\),这两个节点之间的所有节点(包括\(u、v\))都将结合变为一个新的节点。要求你通过该操作将所有的节点变为只有一个节点,求最小的操作数。2、题目解析  由题意可得:当\(u、v\)......
  • 前端实现文件上传(点击+拖拽)
    一、简介之前在Vue项目中使用过element的上传组件,实现了点击上传+拖拽上传的两种上传功能。然后我就在想是否可以通过原生的html+js来实现文件的点击上传和拖拽上传,说干就干。首先是点击获取上传文件自然没的说,只需要借助input标签即可,但原生的点击上传按钮,实在是过于简陋,所以我的......
  • Codeforces Round 915 (div2) E
    E.TreeQueries[题目链接](https://codeforces.com/contest/1904/problem/EProblem-E-Codeforces)题意概括:给定一棵大小为\(n\)的树,回答如下询问,询问之间相互独立:给定一个点\(x\)与\(k\)个点\(a_i\),求出从\(x\)出发不经过任何一个\(a_i\)的最长简单路径长度......
  • codeforces刷题(1100):1917B_div2
    模板B、EraseFirstorSecondLetter跳转原题点击此:该题地址1、题目大意  给你一个字符串,可以执行任意次以下操作,生成最终的字符串(不可为空),问你能生成的不重复字符串数为多少。操作一:删除字符串第一个字符;操作二:删除字符串第二个字符。2、题目解析  发现,操作一:即选......
  • div4 题目
    .Dashboard-CodeforcesRound898(Div.4)-Codeforces1.Problem-G-Codeforces这一题我们首先进行分类讨论,因为情况很多第一种情况当首尾存在一个B的情况时,我们可以吃掉所有的A,这个时候只需要计算出A的数量就可以第二种情况是当首尾都是A,但是中间有连续的B的时候,这个......
  • 让div盒子居中
    <template><!--<divclass="about"><h1>Thisisanonepage</h1></div>--><divclass="about"><!--1.给盒子设置宽高,然后用margin:0auto;--><divclass="one">第一种......
  • P5840 [COCI2015] Divljak
    题意:Alice有\(n\)个字符串\({S}_1,{S}_2,\ldots,{S}_n\),Bob有一个字符串集合\({T}\),一开始集合是空的。接下来会发生\(q\)个操作,操作有两种形式:1P:Bob往自己的集合里添加了一个字符串\({P}\)。2x:Alice询问Bob,集合\({T}\)中有多少个字符串包含串\({S}_x\)(......