Vue-动态修改数组
需求描述:
点击删除时,仅删除当前选中的这个对象。

html:
<el-card shadow="never" style="position: relative;">
<div class="lottery-ct">
总量:
<el-input type="number" @change="totalChange(item)" v-model="item.totalNum" style="width: 12%;" :disabled="isOpen"></el-input>
库存: {{item.stockNum}}
</div>
<img style="position: absolute;right: 0;top: 10px;right: 10px;cursor: pointer;" src="data:images/i-cl-close1.115e49e.png" @click="closeList(item)"></img>
</el-card>
@click="closeList(item)" 将当前循环的 item 传入 js:
closeList(item){
this.list.splice(this.list.indexOf(item), 1)
},
运用 splice (要删除的元素, 删除个数)
Vue-动态修改数组的更多相关文章
- Vue 动态修改data 值 并触发视图更新
Vue 动态修改data 值 并触发视图更新 this.$set(obj, key, '') // Vue 动态修改或者添加data key 并触发视图更新
- Vue动态修改网页标题
业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三). Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案: 一.最笨方案 ...
- vue中修改数组,dom未更新的问题
vue中我们会频繁操作各种数据,但有时候发现修改完数据以后,dom并未更新? 比如有一个数组对象: obj = [{'name': 'joy'},{'name': 'bowen'}] 我要循坏插入某个 ...
- vue动态修改title
1.项目中,cmd下 ,运行:cnpm install vue-wechat-title --save 2.在 main.js 中,设置: import VueWechatTitle from 'vu ...
- vue $set修改数组
看了别人写的,自己简单写一下自己的理解. 因为 JavaScript 的限制,Vue.js 不能检测到下面数组变化,所以,想要正常是不能通过操作数组来渲染dom的,解决的方法是通过set方法, 在组件 ...
- Vue动态修改class
#####对象方法-最简单的绑定(这里的active加不加单引号都可以,以下也一样都能渲染) :class="{ 'active': isActive }"1判断是否绑定一个act ...
- vue 动态修改 css
<div v-for="i in resultDate" v-if="i.ProjectId>='4'" @click=EveyTesttInfo( ...
- vue 动态修改el-upload 的action
action是一个必填参数,且其类型为string,我们把action写成:action,然后后面跟着一个方法名,调用方法,返回你想要的地址,代码示例: //html 代码 <el-upload ...
- 微信小程序setdata修改数组或对象
1.this.setdata修改数组的固定一项的值 changeItemInArr: function() { this.setData({ 'arr[0].text':'changed data' ...
- 基于Vue的SPA动态修改页面title的方法
最近基于VUE做个SPA手机端web发现动态修改页面标题通过document.title=xxxx 来修改着实蛋疼,而且在IOS的微信端据说没效果.百度发现要针对IOS的微信做点额外的操作,即:创建一 ...
随机推荐
- Redis_集群_主从模式_哨兵模式
1.主从模式 2.哨兵模式
- canvas意料之外获得降龙十八掌的效果
瞎整本来是要点击编辑多张图片的,没想到弄成这样.这不是电视剧里的降龙十八掌吗 特此记录留着以后用,看来canvas做游戏特效都不错啊. <!DOCTYPE html><html la ...
- THE DEFINITIVE GUIDE TO DEBUGGING JAVASCRIPT
FIGURING OUT WHERE THE ERROR COULD BE READ THE CODE USING THE CONSOLE THE CHROME DEV TOOLS THE DEBUG ...
- Nginx 学习笔记(八)http和https跨域问题解决
今天在做网易云信的时候,修改了一下源码,使用自己的服务端进行登陆, 注意:这里是使用http域名访问https域名 1.下载源码,配置了IM的域名,im.tinywan.com 没有开启https,具 ...
- Linux系统中用户组、文件权限浅解
用户组 在linux中的每个用户必须属于一个组,不能独立于组外.在Linux中每个文件有所有者.所在组.其它组的概念. [所有者] 一般为文件的创建者,谁创建了该文件,就天然的成为该文件的所有者,用& ...
- 在线xss练习平台
在线xss练习平台 HTTPS://ALF.NU/ALERT1 这个是只要能输出alert1就算赢. No.1第一个就很简单了,什么都没有过滤,只需要闭合前面的标签就可以执行xss了. 1 " ...
- Docker 网络设置
一.Docker 网络默认使用的 Bridge 模式 默认生成为 docker0 :每个容器使用 veth 对,一头在容器的网络 namespace 中,一头在 docker0 上: 1.Docker ...
- webpack提示安装webpack-cli
webpack 安装后提示CLI webpack 4X 后需要安装webpack-cli 请注意需要安装在同一目录 方法: 第一步:npm install -g webpack-cli 第二部: 同步 ...
- Chrome实用技巧集锦
1. 截取整个网页内容: 步骤:(F12 或 Ctrl Shift I 进入开发者模式) ——> Ctrl Shift P 弹出输入框 ——> 输入框中输入:Captrue ful ...
- actionsheet(操作表)
推荐使用锚点方式显示.隐藏actionsheet: 若要使用js代码动态显示.隐藏actionsheet,同样在popover插件的构造方法中传入"toggle"参数即可 //传入 ...