VUE v-for多层嵌套循环怎么取父级的值啊

Question

VUE

我想点击删除可以删除当前值，怎么实现啊？谢谢大家。

template代码

<div v-for="(list,index) in dylist" :key="list">
  
  <a @click="DEL(index)">删除</a>
  <div>{{list.title}}</div>
  
  <div v-for="(list1,index) in list.commentlist" :key="list1">
    <a @click="DELlist1(index)">删除1</a>
    <div>{{list1.title}}</div>
    
    <div v-for="(list2,index) in list1.answerlist" :key="list2">
      <div>{{list2.title}}</div>
      <a @click="DELlist2(index)">删除2</a>
    </div>
  
  </div>

</div>

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){

                }
            });
        },
    }
}

Answer 1

<div v-for="(list,index) in dylist" :key="list">
 
  <a @click="DEL(index)">删除</a>
  <div>{{list.title}}</div>
  
  <div v-for="(list1,index) in list.commentlist" :key="list1">
     <-- 在这儿点击传入cid,其他同理 -->
    <a @click="DELlist1(list1.cid)">删除1</a>
    <div>{{list1.title}}</div>
    
    <div v-for="(list2,index) in list1.answerlist" :key="list2">
      <div>{{list2.title}}</div>
      <a @click="DELlist2(index)">删除2</a>
    </div>
  
  </div>

</div>