<script>
Vue({
data: {
orders: []
},
created() {
$.get( {
url: 'orders',
dataType: 'json'
})
.then( data => {
this.orders = data;
});
},
methods: {
delete(index) {
// 用索引删除
this.orders.splice(index, 1);
},
deleteByID(id) {
this.orders.splice(this.orders.find( order => {
return order.id === id;
}), 1);
}
}
});
</script>
<tr v-for="(order, index) in orders">
<td>...</td>
<td>
<button type="button" @click="delete(index)">用索引删除</button>
<button type="button" @click="deleteByID(order.id)">用 ID 删除</button>
</td>
</tr>

vue中的列表项删除操作的更多相关文章

  1. 3-7 Vue中的列表渲染

     举个案例:循环data中的list的值在div中,并显示相应的index值. 关于数组的循环: //显示效果如下图: //一般的列表渲染最好带一个key值,要把key值设置为唯一值的话,可以选择in ...

  2. vue 中后台 列表的增删改查同一解决方案

    查看 & 查询 常⻅业务列表⻚都是由 搜索栏 和 数据列表 组成. 其中: 搜索栏包含 搜索条件 . 新增 . 批量xx . 导出 等对 数据列表 全局操作功能项. 数据列表包含 分⻚ 和每条 ...

  3. python3中list列表的一些操作

    最近遇到许多List的操作,感觉它是一种很重要的一种基础数据结构,本人掌握的也不是很扎实,这里找了一些列表的操作,常用函数,记录下来,希望对大家有用.如果理解有偏差,欢迎指正,感谢! (1)列表的合并 ...

  4. Python中list列表的常见操作

    Python的list是一个列表,用方括号包围,不同元素间用逗号分隔. 列表的数据项不需要具有相同的类型.(列表还可以嵌套,即列表中的列表) 每个元素都有一个索引(表示位置),从0开始:可以用索引-1 ...

  5. mySql事务_ _Java中怎样实现批量删除操作(Java对数据库进行事务处理)?

      本文是记录Java中实现批量删除操作(Java对数据库进行事务处理),在开始之前先来看下面这样的一个页面图: 上面这张图片显示的是从数据库中查询出的出租信息,信息中进行了分页处理,然后每行的前面提 ...

  6. python序列(二)列表的删除操作

    1.使用del命令删除列表中的指定位置上的元素 >>> s=[1,2,3,4] >>> del s[1] >>> s [1, 3, 4] 2.使用 ...

  7. Jquery mobile 中在列表项上使用单选按钮

      无意中发现可以在li上实现开关按钮 http://jsfiddle.net/Gajotres/pzfr2/                 触类旁通,终于实现了在li上增加单选按钮组   @mod ...

  8. ASP.NET MVC3 实例(六) 增加、修改和删除操作(二)

    http://www.jquery001.com/asp.net-mvc3-instance-add-update-delete2.html 上篇我们在 ASP.NET MVC3 中实现了添加操作,由 ...

  9. vue中给请求到的数据对象加属性问题

    今天发现了个很奇怪的问题,我在做一个:点击列表  使点中的列表项变色的功能,而且是多个大列表项,在每个大列表项里点击切换列表项的时候不影响其他大列表项的选项. 解决思路,因为这些大列表项是请求到的数据 ...

随机推荐

  1. ubuntu 配置 samba, win7 map network device from linux

    一. samba的安装: # sudo apt-get insall samba # sudo apt-get install smbfs 二. 创建共享目录,或是找已经存在的文件夹,只要权限放开就行 ...

  2. 2015轻院校赛 D 社交网络(排列组合)

    http://acm.zznu.edu.cn/problem.php?id=1964 题目描述 输入 输出 样例输入 2 2 1 0 1 1 0 3 1 0 1 1 1 0 1 1 1 0 样例输出 ...

  3. Reverse Nodes in k-Group (链表)

    Given a linked list, reverse the nodes of a linked list k at a time and return its modified list. If ...

  4. codechef Polo the Penguin and the Tree

    一般xor 的题目都是用trie解决. 那这道题是在树上的trie; 首先:从root==1,遍历树得到1到所有节点的xor 值. 然后对于每个点我们把其插入二进制树中. 对于每一个点查找其二进值异或 ...

  5. Spring中使用存储过程

    以下内容引用自http://wiki.jikexueyuan.com/project/spring/jdbc-framework-overview/sql-stored-procedure-in-sp ...

  6. arcengine 文件夹连接

    Provides access to members that manages a GX catalog. Product Availability Available with ArcGIS Des ...

  7. Python导入模块的几种姿势

    中文翻译:http://codingpy.com/article/python-import-101/ 英文原文:http://www.blog.pythonlibrary.org/2016/03/0 ...

  8. 火狐浏览器Firefox 如何下载网页的SWF视频,硅谷动力的网站视频怎么下载

    1 使用火狐浏览器查看到底视频在哪里,我随便开了一段视频,发现这个SWF(外框套了一个Control.swf,内层才是真实的09-class.swf)   2 我们从下面这一段代码中进行分析 < ...

  9. CSDN-markdown基本的语法说明

    文件夹 概述 简介Markdown CSDN Markdown的功能支持 标题 Setext形式 atx形式 区块引用 分隔线 强调 列表 无序列表 有序列表 注意事项 链接 自己主动链接 普通文本链 ...

  10. vux-uploader 图片上传组件

    1.网址:https://github.com/greedying/vux-uploader 2.安装 npm install vux-uploader --save npm install --sa ...