OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

v-for not rendering updated array items in ref after $fetch

  • Thread starter Thread starter Siddhartha Mondal
  • Start date Start date
S

Siddhartha Mondal

Guest
I'm working on a small personal project using Nuxt 3 with the Composition API. I'm trying to update a list of videos retrieved from a YouTube playlist API and render them dynamically using v-for. However, even though my videos ref is being updated, the new array items are not being rendered in the template.

Here is my code:

Code:
<script setup lang="js">
import { ref, computed } from 'vue';
import { useColorMode } from '@nuxtjs/composition-api';

const colorMode = useColorMode();
const isDark = computed({
  get () {
    return colorMode.value === 'dark';
  },
  set () {
    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark';
  }
});

const url = ref('');
const videos = ref([]);
const loading = computed(() => {
  return videos.value.length === 0;
});

const extractPlaylistId = (url) => {
  const regex = /[&?]list=([^&]+)/;
  const matches = url.match(regex);
  return matches ? matches[1] : null;
};

async function loadVideos(url) {
  const response = await $fetch(`http://localhost:8000/?playlist_id=${extractPlaylistId(url)}`);
  response.forEach((vid) => {
    videos.value.push(vid);
  });
  console.log(videos.value);
}
</script>

<template>
  <div>
    <input v-model="url.value" placeholder="Enter Youtube Playlist URL..." @keyup.enter="loadVideos(url.value)" />
    <button @click="loadVideos(url.value)">Load Videos</button>
    <div v-for="vid in videos.value" :key="vid.id">
      <p>{{ vid.title }}</p>
    </div>
  </div>
</template>

Issues​


Even though videos is being updated correctly (as confirmed by console.log(videos.value)), the new items are not rendered in the template by the v-for loop.

What I've Tried:​

  • Confirmed that videos.value is being updated with the correct data.
  • Checked that videos is a ref and value is being accessed correctly.
  • Ensured that v-for is set up to iterate over videos.value
  • Tried to update videos.value directly by assigning it to response .

<p>I'm working on a small personal project using Nuxt 3 with the Composition API. I'm trying to update a list of videos retrieved from a YouTube playlist API and render them dynamically using v-for. However, even though my videos ref is being updated, the new array items are not being rendered in the template.</p>
<p>Here is my code:</p>
<pre><code><script setup lang="js">
import { ref, computed } from 'vue';
import { useColorMode } from '@nuxtjs/composition-api';

const colorMode = useColorMode();
const isDark = computed({
get () {
return colorMode.value === 'dark';
},
set () {
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark';
}
});

const url = ref('');
const videos = ref([]);
const loading = computed(() => {
return videos.value.length === 0;
});

const extractPlaylistId = (url) => {
const regex = /[&?]list=([^&]+)/;
const matches = url.match(regex);
return matches ? matches[1] : null;
};

async function loadVideos(url) {
const response = await $fetch(`http://localhost:8000/?playlist_id=${extractPlaylistId(url)}`);
response.forEach((vid) => {
videos.value.push(vid);
});
console.log(videos.value);
}
</script>

<template>
<div>
<input v-model="url.value" placeholder="Enter Youtube Playlist URL..." @keyup.enter="loadVideos(url.value)" />
<button @click="loadVideos(url.value)">Load Videos</button>
<div v-for="vid in videos.value" :key="vid.id">
<p>{{ vid.title }}</p>
</div>
</div>
</template>
</code></pre>
<h2>Issues</h2>
<p>Even though videos is being updated correctly (as confirmed by console.log(videos.value)), the new items are not rendered in the template by the v-for loop.</p>
<h2>What I've Tried:</h2>
<ul>
<li>Confirmed that videos.value is being updated with the correct data.</li>
<li>Checked that videos is a ref and value is being accessed correctly.</li>
<li>Ensured that v-for is set up to iterate over videos.value</li>
<li>Tried to update videos.value directly by assigning it to response
.</li>
</ul>
 

Latest posts

Online statistics

Members online
0
Guests online
3
Total visitors
3
Ads by Eonads
Top