Question 53496 in Javascript Question posted in
A very good W3school tutorial can be found here.

v-for loop is not working in nuxt 3 project – Javascript

I am trying to bind some mock data saved in a variable called whatsHappeningItems that I have in my script as a ref to send into a card component I have. When I do the v-for="whatsHappening in whatsHappeningItems" as shown:

I get this error message:

[vue/valid-v-for] Custom elements in iteration require ‘v-bind:key’ directives.

const whatsHappening: {
title: string;
count: string;

}

Anyone know why this is happening?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Seems like it is a eslint issue as stated by Tachibana Shin

    I wrote:

    <...
v-for="whatsHappening in whatsHappeningItems" v-bind:key="whatsHappening" 
  ....

    And my mock data looks like this:

    <...
<script setup>
const whatsHappeningItems = ref([
  {
    title: 'example',
    count: 'example',
  },
]);
</script>

  ....

    all errors were removed so it seems to have fixed the issue.


  2. 0

    it’s eslint add something like this

    <...
  v-for="(whatsHappening, index) in whatsHappeningItems"
  :key="index"
  ....
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search