Avertizare Vue (FOR)

Limbaje de Programare PHP
1

Tot primesc un “vue warn” de care nu pot sa scap, codul functioneaza bine, dar ma deranjeaza sa-l tot vad prin log.
Eroare: <transition-group> children must be keyed: <ElTag>
Are legatura cu acest FOR:

<el-option v-for="item in data.accounts"
           :key="item.index" :label="item.name" :value="item">
    <span style="float: left">{{ item.name }}</span>
</el-option>

Problema ar fi din “mounted”, daca scot aceasta parte de cod din “mounted” nu mai primesc avertizarea, dar nici codul nu mai salveaza datele corect dupa.

if(!this.data.accounts.lenght > 0){
    this.data.accounts.push({
        'id' : null,
        'name' : '',
    })
}
2 
'id' : null,

:key="item.index"

de unde scoti index? si s-ar putea ca nici acel null sa nu ii placa.

3

v-for="(item, index) in list" <- try this

<el-option v-for="(item, index) in data.accounts" :key="index" :label="item.name" :value="item">
1 Like
4

Poate e de la asta. Corect e length.

5

Nu functioneaza nimic, la fel e… Am incercat toate cele 3 variante.

6

Cum arata componenta <el-option />? Presupun ca acolo ai transition group. Cred ca trebuie sa adaugi key la acel span. Si e mai bine sa pui id-ul ca si key, nu indexul: https://vuejs.org/v2/guide/list.html#Maintaining-State

7

Desi este pt React, posibil sa fie un rationament asemanator

8

Am pus key la span, degeaba.
“transition-group” nu am in fisierul “.vue”.

9

Incearca asa, pe key cu id:

<el-option v-for="item in data.accounts"
           :key="item.id" :label="item.name" :value="item">
    <span style="float: left">{{ item.name }}</span>
</el-option>

Si in mounted, la id sa dai -1 si sa corectezi lenght in length:

if(!this.data.accounts.length > 0){
    this.data.accounts.push({
        'id' : -1,
        'name' : '',
    })
}

Daca nu merge, fa un exemplu pe codepen unde se poate reproduce bug-ul. Altfel nu prea imi dau seama ce nu ar merge.

Alta problema ar putea fi daca mai ai alte elemente langa <el-option /> care nu au key, ca aici: https://github.com/SortableJS/Vue.Draggable/issues/144#issuecomment-574677078

10

Tot nu functioneaza… ciudat dupa cum am spus, daca scot “this.data.accounts.push { .etc. }” functioneaza insa nu se mai actualizeaza baza de date cu noile informatii…

11

  1. îți lipsește proprietatea index.
    corect in for trebuie sa ai (item, index)

  2. trebuie sa faci key mai unica, nu doar o cifra banala. Încearcă ceva de genul:
    :key=“‘item-element-key-‘ + index”

asta ar face cheia unică.

dacă mai ai undeva pe pagina acelasi loop cu aceleași key, nu o să mearga bine.

12

Tot nu merge… :frowning:

13

care este eroarea?

1 Like
14 
<transition-group> children must be keyed: <ElTag>
15

Fa un paste la tot codul incepand cu <transition-group>, am impresia ca nu ne uitam unde trebuie.

16

Eu nu văd in codul afișat nici un transition-group.

Ne uitam unde nu trebuie.

17

“transition-group” nu am nicaieri prin visierele “.vue”, sau cel putin nu am gasit eu.