一只甜甜圈
2023-09-14 18:16:21
我本來希望自己能解決這個(gè)問題,但我完全陷入困境。歡迎任何幫助。基本上,該組件打印一個(gè) 100x10 的矩陣,如下所示:威脅 1:資產(chǎn)類型 1 資產(chǎn)類型 2 資產(chǎn)類型 3 資產(chǎn)類型 4 [...]威脅2:資產(chǎn)類型1 資產(chǎn)類型2 資產(chǎn)類型3 資產(chǎn)類型4 [...]威脅 3:資產(chǎn)類型 1 資產(chǎn)類型 2 資產(chǎn)類型 3 資產(chǎn)類型 4 [...]威脅 4:資產(chǎn)類型 1 資產(chǎn)類型 2 資產(chǎn)類型 3 資產(chǎn)類型 4 [...][...]基本上,每種威脅都與不同類型的資產(chǎn)相關(guān)。威脅和資產(chǎn)類型都是動(dòng)態(tài)的,并從 GraphQL 后端檢索。每行都是一個(gè) v-chip-group,控制該行上的 v-chip(資產(chǎn)類型),整個(gè)矩陣由幾個(gè) v-for 動(dòng)態(tài)構(gòu)成:<v-row v-for="(threat, index) in threats" :key="threat.short"> <v-col> <v-card"> {{threat.id}}.- {{threat.name}} </v-card> </v-col> <v-col> <v-chip-group :value="associations[index]" multiple > <v-chip v-for="(type, index2) in assettypes" :key="type.id" @click="getClick(index, index2)" > </v-chip> </v-chip-group> </v-col></v-row>[...]// This function gets the row and the column clickedgetClick(row, column){ //this.$refs.$emit("input") var position = this.associations[row].indexOf(column) if (position > -1){ this.associations[row][position] = -1 } else { this.associations[row][this.associations[row].length] = column } },我在這件事上遇到了幾個(gè)問題。矩陣并不是很大,但足夠大,不想經(jīng)常渲染它(我需要用更大的矩陣做一些非常類似的事情,也許是 150 x 100)。內(nèi)容存儲(chǔ)在名為“associations”的多維數(shù)組中,該數(shù)組在開頭使用push() 進(jìn)行初始化。我發(fā)現(xiàn)的第一件事是,使用 v-model,所有 v-chip 都可以通過單擊 v-chip 來渲染。我無法獲得獨(dú)特的 v 芯片密鑰,我想這可能就是原因。所以我轉(zhuǎn)向 v-bind 和 @click 的自定義事件處理程序。然后,我發(fā)現(xiàn)使用 splice() 和 Push() 會(huì)導(dǎo)致相同的重新渲染,因此我恢復(fù)為直接分配(array[] = some),并將重新渲染減少到僅 v-chip被點(diǎn)擊。我知道我可能讓事情變得太復(fù)雜了,但無論如何,這似乎暫時(shí)解決了,我現(xiàn)在想不出更好的解決方案。現(xiàn)在的問題是,每行的第一次點(diǎn)擊似乎“迷路了”。簡而言之,V-chip 不會(huì)發(fā)出 input() 事件,并且 v-chip 不會(huì)更新,但僅在第一次單擊時(shí)更新。第一次單擊后,同一行上的下一次單擊將完美運(yùn)行。我還發(fā)現(xiàn),第一次單擊會(huì)重新呈現(xiàn)表格上的所有元素。我不明白為什么,真誠的。然后我發(fā)現(xiàn)了一個(gè)有趣的事情。只是為了讓它工作,我在點(diǎn)擊處理程序的開頭添加了“this.$refs.$emit("input")”行。被評(píng)論的那個(gè)。我收到一個(gè) Vue 警告“v-on 處理程序中的錯(cuò)誤:“TypeError:this.$refs.$emit 不是一個(gè)函數(shù)”,這似乎合乎邏輯......但它有效:輸入事件由 v-chip 發(fā)出,并且第一次點(diǎn)擊時(shí)頁面沒有呈現(xiàn)。但我不明白為什么,因?yàn)樗緵]有意義(對(duì)我來說)。我懷疑初始重新渲染和未發(fā)出的輸入事件有關(guān),但我找不到問題的根源。歡迎任何想法、建議。
1 回答

呼喚遠(yuǎn)方
TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超11個(gè)贊
幾個(gè)想法:
:key
這可能是與您不獨(dú)特相關(guān)的問題之一。
而不是:key="threat.short"
嘗試:key="`threat-short-${index}`"
檢查控制臺(tái)日志是否有任何重復(fù)的關(guān)鍵警告。
此外,這可能是由于Vue 數(shù)組反應(yīng)性的:value="associations[index]"
工作方式所致。
我懷疑 Vue 由于使用了這樣的數(shù)組而沒有對(duì)第一次點(diǎn)擊做出反應(yīng)。
你可以將它包裝在一個(gè)函數(shù)中:
getRow(index){ ???return?this.associations[index]; }
或者作為測(cè)試,嘗試僅為 1 行創(chuàng)建一個(gè)計(jì)算屬性,看看是否可以修復(fù)該問題。如果確實(shí)如此,那么這可能是您的問題。
您能否制作一個(gè)在線演示來展示該錯(cuò)誤?然后我也許可以修復(fù)它。
添加回答
舉報(bào)
0/150
提交
取消