“未定义”值，首先单击vuetify v-chip-group v-chip
我对Vue和vuetify非常陌生，我第一次点击一个v芯片组就遇到了一些问题。基本上，这个组件打印一个矩阵，如下所示：
Threat1: AssetType1 AssetType2 AssetType3 AssetType4
Threat2: AssetType1 AssetType2 AssetType3 AssetType4
Threat3: AssetType1 AssetType2 AssetType3 AssetType4
Threat4: AssetType1 AssetType2 AssetType3 AssetType4
基本上，每种威胁都与不同类型的资产有关。威胁和资产类型都是动态的，可以从GraphQL后端检索。
每一行都是一个v芯片组，它控制该行上的v芯片(资产类型)，整个矩阵由几个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-芯片组的v-模型，使用初始for的索引。也就是说，v芯片组和行一样多，每个v芯片组的数组状态称为mehindex。然后：
- 第一个v-for打印来自GraphQL查询数组的威胁名称，第二个v-for打印来自资产类型GraphQL查询数组的v-芯片。当选择v芯片时，
- 更新v芯片组父数组，更新数组mehindex。
一切似乎都正常工作，但我看到在v芯片单击之后调用的console.log()似乎“错过”了第一个v芯片单击，因为当我连续第一次单击时，相关的v芯片组数组是空的，而它应该包含相关组的v芯片的数组索引。
我遗漏了什么？
谢谢。
回答 2
Stack Overflow用户
发布于 2020-11-21 18:48:07
https://v2.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>Stack Overflow用户
发布于 2021-09-23 23:12:57
先生，也许你可以把这件事放在v型芯片组下。
https://stackoverflow.com/questions/64946087
复制相似问题
腾讯云开发者
