Элементы в итерации должны иметь директивы v-bind:key в VueApp.

Появляется эта ошибка: элементы в итерации должны иметь директивы v-bind:key. (vue/require-v-for-key)

Codepen — https://codesandbox.io/s/competent-pine-8u9mt?file=/src/components/Laptops.vue:386-393

Кто-нибудь знает, как решить эту ошибку?


vue.js vue-component
person Community    schedule 06.06.2020    source источник

Ответы (1)


arrow_upward
14
arrow_downward

При использовании v-for vue ожидает уникальный ключ для каждой итерации. вы можете добиться этого, привязав ключ индекса к вашему элементу div

 <div v-for="(product, index) in products" :key="index">
   // code to execute
 </div>

:key — это сокращение от «v-bind:key»

person Jesse    schedule 06.06.2020
comment
Спасибо Джесси, не могли бы вы взглянуть на мой вопрос. - person ; 06.06.2020
comment
я не уверен, что ты имеешь в виду - person Jesse; 06.06.2020
comment
У меня есть еще один вопрос, я хочу отобразить общее количество в модели корзины, но я не могу сделать так, чтобы в общем разделе отображалось Нан, не могли бы вы взглянуть на этот codepen - codesandbox.io/s/competent-pine-8u9mt?file=/src/main.js - person ; 06.06.2020
comment
извините, я не могу найти код, на который вы ссылаетесь. NaN означает не число, поэтому, возможно, ваша сумма на самом деле является строкой, и вам нужно сначала преобразовать ее в целое число. вы можете проверить тип с помощью typeof(), и если это строка, вам просто нужно использовать функцию parseInt() - person Jesse; 06.06.2020