javascript - How to get the value of the parent in VUE v-for multi-level nested loop?

Question

VUE

I want to click delete to delete the current value. How to achieve this? thank you all.

templatecode

<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 code

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

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