javascript - VUE v-for多层嵌套循环怎么取父级的值啊
问题描述
VUE
我想点击删除可以删除当前值,怎么实现啊?谢谢大家。
template代码
<p v-for='(list,index) in dylist' :key='list'> <a @click='DEL(index)'>删除</a> <p>{{list.title}}</p> <p v-for='(list1,index) in list.commentlist' :key='list1'> <a @click='DELlist1(index)'>删除1</a> <p>{{list1.title}}</p><p v-for='(list2,index) in list1.answerlist' :key='list2'> <p>{{list2.title}}</p> <a @click='DELlist2(index)'>删除2</a> </p> </p></p>
JS代码
export default { data () {return { dylist: [{id: ’1’,title: '标题一',commentlist: [{ cid: '1', title: '评论一', answerlist: [{aid: '1',title: '回复一' }, {aid: '2',title: '回复一' }]}] },{id: ’2’,title: '标题二',commentlist: [{ cid: '2', title: '评论啊啊啊啊啊', answerlist: []}] }]} }, methods: {DEL: function (index) { var v = this $.ajax({async: true,type: 'POST',url: 'del.do',data: { 'id': v.dylist[index].id /*这样可以拿到最外层的id*/},dataType: 'json',success: function(result){ v.dylist.splice(index, 1) ;} });},DELlist1: function (index) { var v = this $.ajax({async: true,type: 'POST',url: 'DELlist1.do',data: { 'cid': v.dylist[index].commentlist.cid /*当我需要cid的时候怎么拿呀?*/},dataType: 'json',success: function(result){} });},DELlist2: function (index) { var v = this $.ajax({async: true,type: 'POST',url: 'DELlist1.do',data: { 'aid': v.dylist[index].commentlist.answerlist.aid /*当我需要aid的时候怎么拿呀?*/},dataType: 'json',success: function(result){} });}, }}
问题解答
回答1:<p v-for='(list,index) in dylist' :key='list'> <a @click='DEL(index)'>删除</a> <p>{{list.title}}</p> <p v-for='(list1,index) in list.commentlist' :key='list1'> <-- 在这儿点击传入cid,其他同理 --> <a @click='DELlist1(list1.cid)'>删除1</a> <p>{{list1.title}}</p><p v-for='(list2,index) in list1.answerlist' :key='list2'> <p>{{list2.title}}</p> <a @click='DELlist2(index)'>删除2</a> </p> </p></p>
相关文章:
1. vim - docker中新的ubuntu12.04镜像,运行vi提示,找不到命名.2. 为什么redis中incr一个“0” 会报错?3. docker api 开发的端口怎么获取?4. docker - 各位电脑上有多少个容器啊?容器一多,自己都搞混了,咋办呢?5. android - 优酷的安卓及苹果app还在使用flash技术吗?6. docker不显示端口映射呢?7. nginx - 关于vue项目部署到ngnix后出现的问题8. 网页文字默认显示固定行数,点击按钮显示全部怎么实现?9. python - 使用scrapy框架爬百度图片被墙10. HTML表单操作标签调用父相对URL

网公网安备