我本来希望自己能解决这个问题，但我完全陷入困境。欢迎任何帮助。基本上，该组件打印一个 100x10 的矩阵，如下所示：
威胁 1：资产类型 1 资产类型 2 资产类型 3 资产类型 4 [...]
威胁2：资产类型1 资产类型2 资产类型3 资产类型4 [...]
威胁 3：资产类型 1 资产类型 2 资产类型 3 资产类型 4 [...]
威胁 4：资产类型 1 资产类型 2 资产类型 3 资产类型 4 [...]
[...]
基本上，每种威胁都与不同类型的资产相关。威胁和资产类型都是动态的，并从 GraphQL 后端检索。
每行都是一个 v-chip-group，控制该行上的 v-chip（资产类型），整个矩阵由几个 v-for 动态构成：
<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
}
},
我在这件事上遇到了几个问题。矩阵并不是很大，但足够大，不想经常渲染它（我需要用更大的矩阵做一些非常类似的事情，也许是 150 x 100）。内容存储在名为“associations”的多维数组中，该数组在开头使用push() 进行初始化。
我发现的第一件事是，使用 v-model，所有 v-chip 都可以通过单击 v-chip 来渲染。我无法获得独特的 v 芯片密钥，我想这可能就是原因。所以我转向 v-bind 和 @click 的自定义事件处理程序。
然后，我发现使用 splice() 和 Push() 会导致相同的重新渲染，因此我恢复为直接分配（array[] = some），并将重新渲染减少到仅 v-chip被点击。
我知道我可能让事情变得太复杂了，但无论如何，这似乎暂时解决了，我现在想不出更好的解决方案。
现在的问题是，每行的第一次点击似乎“迷路了”。简而言之，V-chip 不会发出 input() 事件，并且 v-chip 不会更新，但仅在第一次单击时更新。第一次单击后，同一行上的下一次单击将完美运行。我还发现，第一次单击会重新呈现表格上的所有元素。我不明白为什么，真诚的。
然后我发现了一个有趣的事情。只是为了让它工作，我在点击处理程序的开头添加了“this.$refs.$emit("input")”行。被评论的那个。我收到一个 Vue 警告“v-on 处理程序中的错误：“TypeError：this.$refs.$emit 不是一个函数”，这似乎合乎逻辑......但它有效：输入事件由 v-chip 发出，并且第一次点击时页面没有呈现。但我不明白为什么，因为它根本没有意义（对我来说）。
我怀疑初始重新渲染和未发出的输入事件有关，但我找不到问题的根源。欢迎任何想法、建议。
呼唤远方
相关分类