首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如果取消选中,则将对象作为值绑定到数组属性的VueJS复选框不会脱离数组

在VueJS中,当我们使用v-model指令将复选框绑定到一个数组属性时,取消选中复选框不会从数组中移除对应的值。这是因为VueJS默认使用对象的引用来判断是否选中,而不是根据值来判断。

解决这个问题的方法是使用VueJS提供的修饰符.sync。通过在v-model指令中添加.sync修饰符,VueJS会将数组中的值与复选框的选中状态保持同步。

示例代码如下:

代码语言:txt
复制
<template>
  <div>
    <label v-for="item in items" :key="item.id">
      <input type="checkbox" :value="item" v-model="selectedItems.sync" />
      {{ item.name }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      selectedItems: []
    };
  }
};
</script>

在上述代码中,我们使用v-for指令遍历items数组,并将每个复选框的值绑定到selectedItems数组中。通过添加.sync修饰符,取消选中复选框会从selectedItems数组中移除对应的值。

关于VueJS的更多信息和相关产品,你可以参考腾讯云的文档和官方网站:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Vue表单输入绑定

,选中则值为true,未选中则值为false;后者绑定的是同一个数组,选中的复选框的值将被保存到数组中。...单选时,绑定的是选项的值(元素value属性的值);多选时,绑定到一个数组,所有选中的选项的值被保存到数组中。 复选框绑定的是布尔值,多个复选框绑定的是一个数组,选中的复选框value属性的值被保存到数组中。   ...isAgree的值初始为false,当选中复选框时,其值为true-value属性的值:yes,之后再取消复选框,其值为false-value属性的值:no。   ...isAgree的值初始为false,当选中复选框时,其值为true-value绑定的数据属性trueVal的值:真,之后再取消复选框,其值为false-value绑定的数据属性falseVal的值:假。

7.3K70

2020前端技术面试必备Vue:(一)基础快速学习篇

Vue 样式绑定 class 使用 1.通过数组方式添加样式 通过数组方式添加样式 【‘样式名’】 --> 这里的样式名是提前在CSS中定义好的, 使用 :class绑定使用 属性,来返回过滤或排序后的数组。...绑定到布尔值 多个复选框,绑定到同一个数组 单选按钮radio 直接绑定到data中自定义属性中 选择框 select v-model 绑定到 select 元素上。...多选时:绑定到一个数组上 值绑定 对于单选按钮,复选框及选择框的选项,v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值): 把值绑定到 Vue 实例的一个动态属性上,这时可以用 v-bind...实现,并且这个属性的值可以不是字符串。

1.9K20
  • Vue3 表单

    v-model 会根据控件类型自动选取正确的方法来更新元素。 v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值,使用的是 data 选项中声明初始值。...属性和 change 事件; select 字段将 value 作为属性并将 change 作为事件。...-- 正确 --> 复选框 复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组: 复选框 以下实例中演示了复选框的双向数据绑定...对于单选按钮,复选框及选择框的选项,v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值): 但是有时我们可能想把值绑定到当前活动实例的一个动态属性上,这时可以用 v-bind 实现,此外,使用 v-bind 可以将输入值绑定到非字符串。

    2.6K40

    Matlab系列之GUI设计基础

    如果为单选按钮或复选框指定 CData 属性,则图像可能与文本字符串重叠。另外,为单选按钮或复选框指定图像会禁用在选择或取消选择它们时显示的功能。...•如果以编程方式替换 'edit' 样式的 控件的字符串,则光标将移到文本开头。 •如果要指定 Unicode® 字符,则将 Unicode 十进制码传递到 char 函数。...元胞数组中的后续元素是传递到回调函数的参数。 •作为有效 MATLAB 表达式的字符串。MATLAB 在基础工作区中计算此表达式。...'checkbox' 取消选中:Value 属性更改为 Min 属性的值。选中:Value 属性更改为 Max 属性的值。...'checkbox' 当取消选中复选框时,Value 属性更改为 Min 属性的值。 'radiobutton' 当取消选择单选按钮时,Value 属性更改为 Min 属性的值。

    5.9K10

    重学巩固你的Vuejs知识体系(上)

    reduce() 可以作为一个高阶函数,用于函数的 compose。 注意: reduce() 对于空数组是不会执行回调函数的。...单个勾选框: v-model即为布尔值。input的value并不影响v-model的值。 多个复选框: 当是多个复选框时,对应的data中属性是一个数组。...单选,只能选择一个值,v-model绑定的是一个值。当我们选中option中的一个时,会将它对应的value赋值到mySelect中。 多选,可以选中多个值。v-model绑定的是一个数组。...当选中多个值时,就会将选中的option对应的value添加到数组mySelects中。...--> 传入一个对象的所有属性 如果你想要将一个对象的所有属性都作为 prop 传入,你可以使用不带参数的

    5K10

    Vuejs开发过程中一些常见问题的解决方法

    可能你已注意到可以用特性插值href="{{url}}" 获得同样的结果:这样没错,并且实际上在内部特性插值会转为 v-bind 绑定。...5.绑定value到Vue实例的一个动态属性上 对于单选按钮,勾选框及选择框选项,v-model绑定的value通常是静态字符串(对于勾选框是逻辑值): <!...$remove(item); 2.检测对象 受ES5的显示,Vuejs不能检测到对象属性的添加或删除。...但是,添加到对象上的新属性不会触发更新。...,上面有什么,下面有什么,都要变化的,如果有不变化的,应该抽离出去,作为公共css样式,在上面的css中,如果我只写 transform: translate(-50%,-50%);而不写下面的transform

    6.6K30

    Vue2.5 零基础开发去哪儿网实战(二) - 起步 Vue.js

    当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值. // 我们的数据对象 var data = { a: 1 } // 该对象被加入到一个 Vue 实例中 var app = new...值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。也就是说如果你添加一个新的属性 比如: app.b = 'hi' 那么对 b 的改动将不会触发任何视图的更新。...因为它是 Vue 识别节点的一个通用机制,key 并不与 v-for 特别关联. 不要使用对象或数组之类的非原始类型值作为 v-for 的 key。...复选框 单个复选框,绑定到布尔值: {{ checked...}} 多个复选框,绑定到同一个数组: <input type="checkbox" id="jack" value="Jack" v-model

    2.1K20

    Vue模板语法

    比如动态绑定a元素的href属性 比如动态绑定img元素的src属性 这个时候,我们可以使用v-bind指令: v-bind用于绑定一个或多个属性值,或者向另一个组件传递props值(这个学到组件时再介绍...语法格式:v-for=(item, index) in items 其中的index就代表了取出的item在原数组的索引值。 6.2v-for遍历对象 的value并不影响v-model的值。 多个复选框: 当是多个复选框时,因为可以选中多个,所以对应的data中属性是一个数组。...单选:只能选中一个值。 v-model绑定的是一个值。 当我们选中option中的一个时,会将它对应的value赋值到mySelect中 多选:可以选中多个值。...v-model绑定的是一个数组。 当选中多个值时,就会将选中的option对应的value添加到数组mySelects中 <!

    3.2K30

    04_使用JS完成功能

    ("user"); //获取输入表单对象,对象调用属性value属性 就可以获取输入的值。...第二步:聚焦事件绑定的函数中(获取span给出提示信息) 第三步:离焦事件绑定的函数中(获取用户输入的内容进行判断) 第四步:如果失败,在span位置给出错误提示信息,如果成功,让span内容为空。.../img/1.jpg" width="1300px" id="img1"/> JS代码 function init(){ //定时器会返回一个值,这个值可以用来取消定时器的...onchange:当用户改变内容的时候使用这个事件(二级联动) 7.使用JS完成全选和选不选操作 技术分析 确定事件(鼠标单击事件onclick),事件绑定到编号前面的复选框里面 获取编号前面的复选框的状态...(是否选中) 获取复选框:var checkAllEle = document.getElementById(“id”) 获取复选框的状态:checkAllEle.checked=true表示选中,

    3.9K60

    16 处理表单数据与父子组件之间的数据交换

    v-model.number用于将复选框选择的结果绑定到变量checked上,number修饰实现的是自动转换输入为数值类型。...选项option的value支持绑定一个js对象,在这样设置时,select选择的结果selected也是一个js对象。 ? 下拉选择框也同时多选: 属性value,是为了将属性value的值,极时同步到变量currentValue上,因为vue的属性是单向的,并不能将一个属性用于v-model。...v-model会自动更新输入值到变量currentValue上,但不会自动派发事件。...使用这种sync模式,假设属性为xxx,要求为: 1,在子组件中当属性变化时,主动派发一个“update:xxx”事件,并附带xxx的值 2,在父组件中,使用:xxx.sync将数据双向绑定到一个data

    2.6K10

    Vue 相关学习笔记(一)

    此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值 如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递, 并且事件对象的名称必须是$event -->...注意:v-bind:class指令可以与普通的class特性共存 1、 v-bind 中支持绑定一个对象 如果绑定的是一个对象 则 键为 对应的类名 值 为对应data中的数据 的区别 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据 绑定数组的时候数组里面存的是data 中的数据 绑定style <div v-bind:style=...-- 1、 复选框需要同时通过v-model 双向绑定 一个值 2、 每一个复选框必须要有value属性 且value 值不能一样 3、 当某一个单选框选中的时候

    7.5K20

    在 Vue 中创建自定义输入

    除此之外,Vue还有一个内置的 v-model 指令,通过绑定一个值并捕获输入事件来 模拟双向绑定 。如果要构建自定义输入组件,我们一定会想到直接使用 v-model 指令。...1':'0'"> 单一复选框的情况差不多就是这样。如果有多个复选框共享一个模型,那么这些复选框将填充一个数组,其值为所有勾选了的复选框,但一定要确保传入的模型是数组类型,否则会产生一些奇怪的行为。...当该复选框的值包含在数组中时, shouldBeChecked 为true ,否则为 false。updateVals将复选框中选中的值添加到数组,并且在取消选中时删除它。...它实际上的工作方式与文本输入情况下完全相同,只是在事件处理程序中,它不会将事件对象传递给它,而是希望将值直接传递给它。...)和多个复选框将所有检查的值合并到一个数组中。

    6.4K20

    项目开发知识盲区记录

    ---Error resolving template layui复选框操作相关记录 layui批量获取复选框选中的值 controller层接收前端数组形式的请求参数 1....,多个路径用逗号分割 type-aliases-package: com.wongoing.sys.model #如果配置了该属性,则仅仅会扫描路径下以该类作为父类的域对象 type-aliases-super-type...#mybatis-plus.type-enums-package = com.wongoing.*.model #如果配置了该属性,则仅仅会扫描路径下以该类作为父类的域对象 mybatis-plus.type-aliases-super-type...flag字段数据,那么在就可以在对应的自定义模板出,使用d.属性名的方式,取值,进行数据的动态更新 如果想要绑定lay-event事件属性,需要使用a标签才会生效,或者可以给按钮加上该属性,外面无需...如果不进行设置,那么默认为text,后端传过来一个JSON字符串,不会解析为JS对象,而是作为纯文本展示 ---- layui如何设置单选框的选择状态 attr()?

    6.9K32
    领券