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. 安全性測試 - nodejs中如何防mySQL注入2. css3 - 純css實現點擊特效3. javascript - 有適合開發手機端Html5網頁小游戲的前端框架嗎?4. javascript - 關于apply()與call()的問題5. javascript - jQuery post()方法,里面的請求串可以轉換為GBK編碼么?可以的話怎樣轉換?6. javascript - axios請求回來的數據組件無法進行綁定渲染7. java - 在用戶不登錄的情況下,用戶如何添加保存到購物車?8. javascript - JS變量被清空9. Python中使用超長的List導致內存占用過大10. javascript - main head .intro-text{width:40%} main head{display:flex}為何無效?
