Nuxt•7mo ago

v-for runs twice

I have no idea what is going on here. i have an api endpoint return a json array and then i use v-for to loop though them but for some reason it loops the original 3 but then loops though them again

<template>
  <div v-for="article of articles" :key="article.id" class="w-screen text-white">
    <h1>{{ article.id }}</h1>
    <div class="flex Class items-center">
      <img :src="article.image" alt="article image" style="height: 140px;" />
      <div>
        <h2 class="text-xl">{{ article.title }}</h2>
        <p>{{ article.description }}</p>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: 'HomePageArticles',
  data() {
    return {
      articles: []
    }
  },
  methods: {
    isEven(id) {
      return id % 2 === 0;
    },
  },
  async created() {
    try {
      const res = await useFetch('/api/articles');
      console.log('Fetched articles:', res.data);
      this.articles = res.data;
    } catch (error) {
      console.error('Error fetching articles:', error);
    }
    console.log(this.articles.length)
  }
}
</script>

<template>
  <div v-for="article of articles" :key="article.id" class="w-screen text-white">
    <h1>{{ article.id }}</h1>
    <div class="flex Class items-center">
      <img :src="article.image" alt="article image" style="height: 140px;" />
      <div>
        <h2 class="text-xl">{{ article.title }}</h2>
        <p>{{ article.description }}</p>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: 'HomePageArticles',
  data() {
    return {
      articles: []
    }
  },
  methods: {
    isEven(id) {
      return id % 2 === 0;
    },
  },
  async created() {
    try {
      const res = await useFetch('/api/articles');
      console.log('Fetched articles:', res.data);
      this.articles = res.data;
    } catch (error) {
      console.error('Error fetching articles:', error);
    }
    console.log(this.articles.length)
  }
}
</script>

4 Replies

invaliduserOP•7mo ago

i also get "error Hydration completed but contains mismatches." in the console and if i turn off ssr the duplicates go away

Smef•7mo ago

Move your fetching into setup() instead of created Or even better, use the <script setup> syntax

<script setup>
    try {
const {data: articles} = await useFetch('/api/articles');
 catch (error) {
      console.error('Error fetching articles:', error);
    }
    console.log(this.articles.length)
</script>

<script setup>
    try {
const {data: articles} = await useFetch('/api/articles');
 catch (error) {
      console.error('Error fetching articles:', error);
    }
    console.log(this.articles.length)
</script>

much more concise

invaliduserOP•7mo ago

oh yeah thank you also noticed a funny thing i just cant access articles in the try catch unless i define the variable outside of it

Smef•7mo ago

Ah, yeah, that's true

<script setup>
const {data: articles} = await useFetch('/api/articles', {
onResponseError({ request, response, options }) {
    // Handle the response errors
      console.error('Error fetching articles:', error);
  }
});
    console.log(this.articles.length)

</script>

<script setup>
const {data: articles} = await useFetch('/api/articles', {
onResponseError({ request, response, options }) {
    // Handle the response errors
      console.error('Error fetching articles:', error);
  }
});
    console.log(this.articles.length)

</script>

Gaming

Programming

v-for runs twice