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

如何取消选中绑定到vuex store state数组项的复选框?

取消选中绑定到Vuex store state数组项的复选框可以通过以下步骤实现:

  1. 在Vue组件中,首先确保已经将Vuex store引入,并在计算属性中获取需要绑定的数组项。
  2. 在复选框的v-model指令中,将其绑定到对应的数组项。
代码语言:txt
复制
<template>
  <div>
    <label v-for="(item, index) in items" :key="index">
      <input type="checkbox" v-model="item.checked" />
      {{ item.label }}
    </label>
  </div>
</template>
  1. 在Vuex store的state中,定义一个数组用于存储复选框的选中状态。
代码语言:txt
复制
// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    items: [
      { label: 'Item 1', checked: false },
      { label: 'Item 2', checked: true },
      { label: 'Item 3', checked: false },
    ],
  },
  // ...
});
  1. 在Vuex store的mutations中,定义一个方法用于取消选中数组项的复选框。
代码语言:txt
复制
// store.js
export default new Vuex.Store({
  // ...
  mutations: {
    uncheckItem(state, index) {
      state.items[index].checked = false;
    },
  },
});
  1. 在Vue组件中,使用mapMutations辅助函数将mutations映射到组件的methods中,并调用该方法取消选中复选框。
代码语言:txt
复制
<template>
  <div>
    <label v-for="(item, index) in items" :key="index">
      <input type="checkbox" v-model="item.checked" @change="uncheckItem(index)" />
      {{ item.label }}
    </label>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  // ...
  methods: {
    ...mapMutations(['uncheckItem']),
  },
};
</script>

通过以上步骤,当复选框的选中状态改变时,调用uncheckItem方法取消选中绑定到Vuex store state数组项的复选框。

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

相关·内容

vue结合vuex实现购物车

这个属性应该是前端应用来维护,前端应用每次刷新页面或者更改是否选中状态都不应该影响服务器端数据。关于这一点我们构造store时再做说明。 vuex构造store结构如图: ?...,store发生变化,和store绑定dom会自动更新。...全选/反选功能分两部分,首先是点击全选复选框能够修改所有商品选中状态,我们在全选复选框绑定一个chang事件,当用户触发这个事件时候,去触发selectall这这个action,这个action...另外一个功能就是当我们点击单个商品选中状态,当所有的商品选中状态都为true时候,全选按钮也会变为选中状态,这个如何完成呢?...我们需要一个变量来和这个复选框绑定,并且这个变量是根据所有商品是否都被选中计算出来,这就需要判断商品是不是都被选中了,所以我们在定义store时候,在getter中设置了一个叫做isall属性,看一下这部分代码

2.4K30
  • 前端成神之路-Vuex

    今日目标 1.Vuex概述 2.Vuex基本使用 3.使用Vuex完成todo案例 1.Vuex概述 Vuex是实现组件全局状态(数据)管理一种机制,可以方便实现组件之间数据共享 使用Vuex管理数据好处...中核心特性 A.State State提供唯一公共数据源,所有共享数据都要统一放到StoreState中存储 例如,打开项目中store.js文件,在State对象中可以添加我们要共享数据...import axios from 'axios' Vue.use(Vuex) export default new Vuex.Store({ state: { //所有任务列表...$store.commit('addItem') } } 然后打开store.js编写addItem export default new Vuex.Store({ state: {...= -1) state.list.splice(index,1); } } ...... }) D.完成选中状态改变 首先,打开App.vue文件,给“复选”按钮绑定点击事件,编写处理函数

    1.4K10

    Vuex代码优化及模块化

    代码优化 01 - 为什么需要优化 使用Vuex之后会发现在使用store管理数据时有些繁琐,模板插值表达式中,每个被使用数据都必须$store.state.属性名,假如我们有100个数据,$...用于帮助我们映射state数据为计算属性 2、mapGetters用于帮助我们映射getters中数据为计算属性 3、mapActions用于帮助我们生成与actions对话方法,即包含$store.dispatch...(xxx)函数,传递参数需要在绑定事件时携带,否则参数是事件对象 4、mapMutations用于帮助我们生成与mutations对话方法,即包含$store.commit(xxx)函数,传递参数需要在绑定事件时携带...注意这里数组项都是字符串哦 这里“...”看不懂建议去复习一下es6对象扩展运算符(用于取出参数对象所有可遍历属性然后拷贝当前对象),这里就不再赘述了。...也可以直接调用store中配置函数(注意在绑定事件时传递参数),减少代码量显而易见 methods: { // add(){ // // this.sum += this.n

    40830

    react结合redux实现一个购物车功能

    第三个功能,可以实现所有物品全选和取消全选,并且和所有物品选中复选框状态关联。 第四个功能,被勾选要结算物品总件数和总价会根据勾选物品实时计算并显示。...actions 并发送到 store ,记住 actions 只是描述了有事情发生了这一事实,并没有描述应用如何更新 state。...这里需要注意是,item组件通过props接收到父组件传递值后,直接将其绑定到了dom上,当点击选中复选框或者数量增减按钮时,我们并没有直接修改props,这是绝对不允许,代码中是如何呢?...页面中渲染数据是从store中得到,触发action修改了store,所有绑定storedom都会自动更新。...我们定义一个all计算函数,这个函数返回结果计算商品是否被全部选中,我们将其和全选/反选复选框进行绑定,当store触发action时,这个all函数会重新计算,这样的话,当我们点击单件商品选中状态,

    4.8K30

    VUE2全家桶精讲

    统计选中总价和总数量:使用计算属性来计算选中总价和总数量。 持久化本地: 在watch选项中监听cartData变化,并在变化时保存到localStorage中。...4.全选反选 必须所有的小选框都选中,全选按钮才选中 → every 如果全选按钮选中,则所有小选框都选中 如果全选取消,则所有小选框都取消选中 声明计算属性,判断数组中每一个checked属性值...$store) } 八十八、核心概念 - state 状态 1.目标 明确如何给仓库 提供 数据,如何 使用 仓库数据 2.提供数据 State提供唯一公共数据源,所有共享数据都要统一放到Store...是组件自己数据, // 2.state数据整个vue项目的组件都能访问到 state: { count: 101 } }) 3.访问Vuex数据 问题: 如何在组件中获取...$store.state.xxx JS模块中: store.state.xxx 5.代码实现 5.1模板中使用 组件中可以使用 $store 获取到vuexstore对象实例,可通过state属性属性获取

    42810

    vivo 悟空活动中台 - 微组件状态管理(下)

    从最早 EventBus 升级迭代【前置脚本方案】,最终回归到 Vuex 统一状态管理模式,针对平台特点通过技术创新,使 Vuex 无缝集成活动页开发中。...根据我们业务诉求,组件要能感知平台一些核心动作,比如活动保存,组件删除等。微组件感知这些操作后,就会执行相应自定义业务逻辑,如参数校验,业务检查,错误提示等。...5、平台一次性收集所有hook 上文也提到,因为 prop.vue 是随着【编辑器】中对应微组件选中之后动态加载渲染,但是我们又需要一种机制可以一次性收集组件中所有的钩子方法。...其中,defineReactive 函数是对数据进行双向绑定核心函数。...import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex) export default new Vuex.Store({ modules

    1.7K40

    【tkinter系列 第五课 Checkbutton窗口部件 】

    python中有好几个库都可以实现,这个系列我们一起来学习如何使用python自带tkinter库来实现。...本节课将要学习Checkbutton窗口部件,Checkbutton又叫复选框,那什么时候该用复选框呢?通常是在两个不同值之间选中或者不选中,一组按钮就可以实现很多值一个选择。...例-2:选择你喜欢动物 ? 今天我们组后就会实现一个可以选择自己喜欢水果一个案例。 1.显示一个最简单复选框。...解释: 复选框从一个状态变化另外一个状态就会触发命令,启动程序是没有选中,这是用鼠标点击选中,在终端区就会打印出1,再点击取消选中就会打印0。...解释: 这里命令按钮绑定一个单独button按钮上了,选中对应内容后,利用messagebox将选中内容显示出来

    1.6K30

    React-reduxRedux存在问题(解决方案)?Redux最佳实践?Redux实现浅析?

    这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化服务器数据,也包括 UI 状态,如激活路由,被选中标签,是否显示加载动效或者分页器等等。管理不断变化 state 非常困难。...了解这些后,其实已经多少能明白Redux is a predictable state container for JavaScript apps....Redux官方提供 React 绑定库。...原生 Redux-react 没有分形结构,中心化 store; Redux最佳实践? vuex(dva) 事实上,如果用过vuex或者dva的话, 个人觉得还是会比较偏向于这种用法。...暴露出subscribe函数也是挺有意思, 首先是isSubscribed这个变量, 其实就是一种非常基础闭包使用,   然后是每次订阅或者取消订阅时候,都会在dispatch之前保存一次快照,

    1.5K10

    一文读懂Vuex4源码

    在beforeCreate时,通过mixin方式注入了store 为什么Vuex数据都是响应式 创建store时候调用是new Vue,创建了一个Vue实例,相当于借用了Vue响应式。..., rootState, path.concat(key), child, hot) }) } 订阅机制 看完了Vuex4是如何安装和注入,最后来看看Vuex订阅机制是如何实现 和订阅机制有关方法主要有...将callback推入订阅数组 返回一个取消订阅函数 // 用法 该方法会返回一个取消订阅函数 store.subscribe((action, state) => { console.log..._actionSubscribers 返回一个取消订阅函数 // 用法 store.subscribeAction({ before: (action, state) => { console.log...Provide / Inject 不仅用于Vuex实现,同样可以用于深层组件数据传递 提示:provide 和 inject 绑定并不是可响应。这是刻意为之

    70130

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

    本章节,我将带领大家一起刷Vue 技术点,来应对接下来面试,此次会陆续更新Vue全家桶:Vue VueX Vue-Router ;以及后面时间充足的话,来实现一个Vue项目。...-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> 表单输入绑定 复选框checkbox 单个复选框...绑定布尔值 多个复选框绑定同一个数组 单选按钮radio 直接绑定data中自定义属性中 选择框 select v-model 绑定 select 元素上。...多选时:绑定一个数组上 值绑定 对于单选按钮,复选框及选择框选项,v-model 绑定值通常是静态字符串 (对于复选框也可以是布尔值): 把值绑定 Vue 实例一个动态属性上,这时可以用 v-bind...复选框 <input type="checkbox" v-model="toggle" true-value="yes" false-value="no" > // 当选中时 vm.toggle

    1.9K20

    【初级】个人分享Vue前端开发教程笔记

    什么样数据可以存储vuex中 一般情况下,只有组件之间共享数据,才有必要存储vuex中,对于组件中私有的数据,存储在组件自身data中。...store = new Vuex.Store({ // state中存放是全局共享数据 state: {count:0} }) 将store对象挂载到vue实例中 new Vue({ el:...$store.state.全局数据名称 组件访问state数据第二种方式: // 从vuex中按需导入mapState函数 import {mapState} from 'vuex' 通过刚导入mapState...// 定义Action const store = new Vuex.store({ mutations: { add(state){ state.count(); } }, actions...Store中数据发生变化,Getter数据会跟着改变 const store = new Vuex.store({ state: { count: 0 }, getters: { showNum

    4.8K20
    领券