第一次单击 vuetify v-chip-group v-chip 时的“未定义”值

Question

我对 Vue 和 vuetify 还很陌生，第一次点击 v-chip-group 时遇到了一些问题。基本上，这个组件打印一个矩阵，如下所示：

威胁 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-chips（资产类型），整个矩阵由几个 v-fors 动态形成：

<v-row 
  // FIRST V-FOR: prints the threat name and then moves to the v-chip-group and the second V-FOR
  v-for="(threat, index) in threats" :key="threat.name">
  <v-col>
     <v-card>{{threat.name}}</v-card>
  </v-col>
  <v-col>
    // V-model uses the index from the previous 
    <v-chip-group
       v-model="meh[index]"
       multiple
       >
       <v-chip
          filter
          v-for="type in assettypes" :key="type.short"
          @click="loadAssignation(threat.id, type.id)"
          >
       </v-chip>
    </v-chip-group>
  </v-col>

[...]

export default{
  name: 'test',
  data: function () {
    return {
      meh: [[]],
    }
},

methods: {    
  loadAssignation(threatId, assettypeId){
    console.log(this.meh[0])
  }

有一个“meh”数组变量用作 v-chip-groups 的 v-model，使用初始 for 的索引。 IE。 v-chip-groups 与行一样多，每个 v-chip-group 的数组状态称为 meh[index]。那么：

1. 第一个 v-for 打印来自 GraphQL 查询数组的威胁名称，第二个 v-for 打印来自 Asset types GraphQL 查询数组的 v-chips。
2. When a v-chip is selected, the v-chip-group parent array is updated, and the array meh[index] (the row) is updated.

一切似乎都正常工作，但我看到在 v-chip 点击后调用的 console.log() 似乎“错过”了第一次 v-chip 点击，因为当我第一次点击行，相关的v-chip-group数组为空，当它应该包含相关组的v-chip的数组索引时。

我错过了什么？

谢谢。

Answer 1

https://vuejs.org/v2/guide/reactivity.html#For-Arrays

Vue 2 的反应系统无法检测到您何时使用索引更改数组元素。

相当于

<input v-model="yourProperty/>

是

<input :value="yourProperty" @input="newValue => {value = newValue}
<!-- or alternatively: -->
<input :value="yourProperty" @input="value = $event"/>

因此，您需要编写自己的输入处理程序，使用 Vue.set 而不是 JavaScript = 运算符

所以试试

<template>
<v-chip-group
  :value="meh[index]"
  @input="newChipGroupValue => handleInput(newChipGroupValue, indexToUpdate)"
>
...
</template>
<script>
...
methods: {
  handleInput(newChipGroupValue, indexToUpdate) {
    //remember to import Vue from vue
    Vue.set(this.meh, indexToUpdate, newChipGroupValue);
  }
}
</script>

Answer 2

先生，也许您可​​以将活动放在 v-chip-group 下。