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 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 发出，并且第一次点击时页面没有呈现。但我不明白为什么，因为它根本没有意义（对我来说）。

我怀疑初始重新渲染和未发出的输入事件有关，但我找不到问题的根源。欢迎任何想法、建议。

Answer 1

几个想法：:key这可能是与您不独特相关的问题之一。而不是:key="threat.short"尝试:key="`threat-short-${index}`"检查控制台日志是否有任何重复的关键警告。此外，这可能是由于Vue 数组反应性的:value="associations[index]"工作方式所致。我怀疑 Vue 由于使用了这样的数组而没有对第一次点击做出反应。你可以将它包装在一个函数中：getRow(index){    return this.associations[index]; }或者作为测试，尝试仅为 1 行创建一个计算属性，看看是否可以修复该问题。如果确实如此，那么这可能是您的问题。您能否制作一个在线演示来展示该错误？然后我也许可以修复它。