Vue - как создать уникальный ключ с помощью v-for = "item in 3" - PullRequest
0 голосов
/ 10 декабря 2018

У меня есть такой шаблон в Vue:

    <AutoTaskBlock  ref="block" v-for="(block, index) in 2" key="index" class="block"></autoTaskBlock>
    <AutoTaskCircle ref="block" v-for="(circle, index) in 3" key="index" class="circle"></autoTaskCircle>

Так что у меня есть два списка компонентов, которые создаются "из воздуха" - я не использую какой-либо массив для его создания из этого - в этомпомогает мне использовать "v-for =" что-нибудь в (int) ". Однако vue предупреждает меня, что любой список, созданный v-for, нуждается в уникальном ключе. Я хотел использовать индекс, но он дублируется, и это не дает мне предупрежденияно ошибка. Моей следующей попыткой было использование некоторого случайного значения, вычисленного в

computed: {rand () {return Math.random () * 100}}

, ноиспользуя это следующим образом:

    <AutoTaskBlock  ref="block" v-for="(block, index) in 2" key="rand" class="block"></autoTaskBlock>
    <AutoTaskCircle ref="block" v-for="(circle, index) in 3" key="rand" class="circle"></autoTaskCircle>

.. приводит к той же ошибке. После проверки - вычисленный «rand» рандомизируется только при создании, а не позже, поэтому каждый из них одинаков. Следующая попытка состояла в создании метода randкак это:

методы: {rand: function () {return Math.random () * 100}}

Но то же самое - появляется ошибка дублирующего ключа.способ использовать два списка, как это и дать им уникальный ключ?

спасибо, Kalreg:

PS: то же самоеСсылка на оба компонента соответствует желаемому, поэтому здесь нет ошибок.

1 Ответ

0 голосов
/ 10 декабря 2018

Один из вариантов - префикс index с уникальным словом для каждого списка, который вы создаете для дедупликации;Для вашего случая что-то вроде 'block' + index и 'circle' + index:

<AutoTaskBlock  ref="block" v-for="(block, index) in 2" :key="'block' + index" class="block"></autoTaskBlock>
<AutoTaskCircle ref="block" v-for="(circle, index) in 3" :key="'circle' + index" class="circle"></autoTaskCircle>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...