V-chip 未向父级发出输入事件

Question

我本来希望自己能解决这个问题，但我完全陷入困境。欢迎任何帮助。基本上，该组件打印一个 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 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    }  },我在这件事上遇到了几个问题。矩阵并不是很大，但足够大，不想经常渲染它（我需要用更大的矩阵做一些非常类似的事情，也许是 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 发出，并且第一次点击时页面没有呈现。但我不明白为什么，因为它根本没有意义（对我来说）。我怀疑初始重新渲染和未发出的输入事件有关，但我找不到问题的根源。欢迎任何想法、建议。

Answer 1

几个想法：

:key这可能是与您不独特相关的问题之一。

而不是:key="threat.short"尝试:key="`threat-short-${index}`"

检查控制台日志是否有任何重复的关键警告。

此外，这可能是由于Vue 数组反应性的:value="associations[index]"工作方式所致。

我怀疑 Vue 由于使用了这样的数组而没有对第一次点击做出反应。

你可以将它包装在一个函数中：

getRow(index){
   return this.associations[index];
}

或者作为测试，尝试仅为 1 行创建一个计算属性，看看是否可以修复该问题。如果确实如此，那么这可能是您的问题。

您能否制作一个在线演示来展示该错误？然后我也许可以修复它。