javascript - VUE v-for多層嵌套循環(huán)怎么取父級的值啊
問題描述
VUE
我想點擊刪除可以刪除當(dāng)前值,怎么實現(xiàn)啊?謝謝大家。
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: '標(biāo)題一',commentlist: [{ cid: '1', title: '評論一', answerlist: [{aid: '1',title: '回復(fù)一' }, {aid: '2',title: '回復(fù)一' }]}] },{id: ’2’,title: '標(biāo)題二',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 /*當(dāng)我需要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 /*當(dāng)我需要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>
相關(guān)文章:
1. html - 移動端radio無法選中2. html5 - datatables 加載不出來數(shù)據(jù)。3. mysql - 數(shù)據(jù)庫JOIN查詢4. mysql - 這條聯(lián)合sql語句哪里錯了5. 我設(shè)置的背景怎么顯示不出來6. 關(guān)于Navicat連接到mysql,我改了root的密碼后,Navicat連接報錯1862?7. php7.3.4中怎么開啟pdo驅(qū)動8. python - 用scrapy-splash爬取網(wǎng)站 為啥iframe下的內(nèi)容沒有被返回9. mysql - 數(shù)據(jù)庫建字段,默認(rèn)值空和empty string有什么區(qū)別 11010. windows-7 - Win7中Vmware Workstatoin與Xampp中Apache服務(wù)器端口沖突?
