Struggling to resolve this issue independently, I find myself completely stuck. Any assistance is appreciated. Essentially, this component generates a 100x10 matrix like the one shown below:
Threat1: AssetType1 AssetType2 AssetType3 AssetType4 [...]
Threat2: AssetType1 AssetType2 AssetType3 AssetType4 [...]
Threat3: AssetType1 AssetType2 AssetType3 AssetType4 [...]
Threat4: AssetType1 AssetType2 AssetType3 AssetType4 [...]
[...]
Each threat corresponds to different types of assets, both of which are dynamic and fetched from a GraphQL backend.
Every row consists of a v-chip-group that manages the v-chips (Asset types) in that row, and the entire matrix is dynamically constructed using a couple of v-fors:
<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 clicked
getClick(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
}
},
Encountering several challenges with this setup. While the matrix isn't overly large, it's sufficiently sizeable to avoid frequent rendering (and a similar, larger matrix may be needed later on, perhaps 150 x 100). The data is stored in a multidimensional array named "associations," initialized at the start with push().
Initially, all v-chips were rendered upon any click due to v-model. I suspected the lack of unique v-chip keys as the possible cause and switched to v-bind along with a custom event handler for @click.
Further, utilizing splice() and push() resulted in re-rendering issues, prompting me to revert to direct assignments (array[] = something) to reduce re-renders to only the clicked v-chip.
While I may be overcomplicating matters, the present resolution seems effective, but another problem has surfaced. The first click on each row appears to "disappear." In essence, the V-chip fails to emit the input() event and update only during the initial click. Subsequent clicks on the same row work smoothly. Additionally, this initial click triggers a re-render of all table elements, though the reason remains obscure.
An interesting discovery followed my attempt to troubleshoot by adding the commented line "this.$refs.$emit("input")" at the beginning of the click handler. Despite receiving a Vue warning "Error in v-on handler: TypeError: this.$refs.$emit is not a function," strangely, the solution worked: the input event was emitted by v-chip, preventing page rendering with the first click. The logic behind this workaround eludes me.
I suspect a correlation between the initial re-rendering and non-emission of the input event, yet the root cause eludes detection. Suggestions or insights would be greatly welcomed.