Duplicate keys detected: 'x'. This may cause an update error?

Question

[Кирилл Горелов]

Привет парни.

Наш фронтент "мастер", толи не понимает, толи не хочет решить проблему.....


Сам во vue ноль, но тем не менее ответственность за проект несу я сам. Значит мне и чинить нужно.

Есть шаблон вывода списка

<script type="text/template" id="cat-item_tpl">
    <article class="cat-item">
        <a :href="itemdata.link" class="cat-item_link" title="На страницу товара">
        <template v-if="itemdata.imgReplace">
            <figure class="cat-item_img">
                <img :src="itemdata.img" class="img-fluid" :alt="itemdata.imgAlt">
                <img :src="itemdata.imgReplace" class="img-fluid cat-item_img-replace" :alt="itemdata.imgReplaceAlt">
            </figure>
        </template>
        <template v-else>
            <figure class="mb15proc">
                <img :src="itemdata.img" class="img-fluid" :alt="itemdata.imgAlt">
            </figure>
        </template>
        </a>
    </article>
</script>

И цикл вывода

<template v-if="cat_items_sorted.length">
                    <div is="cat-item" :itemdata="item" v-for="(item, idx) in cat_items_sorted" :key="item.id">
                    </div>
                </template>
                <template v-else>
                    <p class="text-muted h5">Ничего не найдено :(</p>
                </template>

От сервера приходят точно все уникальные id, проверял несколько раз. Но все равно подставляются дубли.
Как это починить не в курсе.
Гуглил, но там id и правда повторяется.....

Comments

[Андрей Хохлов]

Судя по всему у вас в cat_items_sorted дублируются id итемов.
Сделайте вывод этого свойства, покажите код, который его формирует (подозреваю это computed свойство)

[Кирилл Горелов]

Андрей Хохлов,

cat_items_sorted: function () {
                        return this.cat_items;
                    }

Думаю пригодиться еще вот эта штука

appendToList: function (listdata) {
                        let last = this.$el.querySelector('.cat-item:last-of-type')
                                            last.scrollIntoView({behavior: 'smooth'})
                                            this.$nextTick(() => {
                                                this.cat_items = this.cat_items.concat(listdata)
                                            })
                    },

Потому что после запрос к серверу вызывается этот метод.

[Андрей Хохлов]

Кирилл Горелов, собственно, у вас есть все что нужно для дебага.

Проверьте что приходить в listdata и нет ли пересечений с cat_items.
Задача - сделать так, чтобы все id в cat_items_sorted (соответственно в cat_items) были разными.

Можно конечно в лоб решить, поменять ключ на индекс:

<div is="cat-item" :itemdata="item" v-for="(item, idx) in cat_items_sorted" :key="idx">

Но подозреваю что дубли товаров вам в списке не нужны.

Answer 1

[Кирилл Горелов]

Дело было не в бабине, это у меня руки кривые((((

При первой загрузке сортировка каталога была по названию. А при прокрутке, по внутренней сортировки. Я забыл что нужно было еще и на фронте поменять сортировку, получалось, что товар шел первым по названию и при подгрузке он же шел первым по сортировке .....

Вот такая шляпа у меня была.
Но спасибо Андрей Хохлов, навел на мысль проверить саму сортировку.