Vuejs - How to display json value from fetch outside of v-for without javascript TypeError-CodePudding

This code show the image from a Youtube api respon. (do not care about the keys & values that i show here because i manipulating the Youtube api results with .map).

I want to display some values (channel title and images) outside a Vuejs v-for loop.

<p v-cloak >{{ ytitems[0].channelTitle}}</p>

<div >
   <img v-bind:src="ytitems[thisindex].thumbnailHQ">
</div>

I get this javascript error: TypeError: Cannot read properties of undefined (reading 'thumbnailHQ');

I tryed the v-if= or v-text who appears in some forums or here but without success.

<p v-cloak >{{ ytitems[0].channelTitle}}</p>
OR
v-text="ytitems[0].providerName"></p>

The thumbnailHQ and the channel title will show but this will cause error and some others javascript functions will stop working.

I fetch the json file from the Youtube api inside a Vue mounted.

When i first tested with a static json file on my server there's no error because there is zero delay, how to delay or there any vue way to stop this error that i do not know?

Like i said, the image and title finally appear with these errors but these error break others javascript functions in my code. I use fetch normally with some then and the v-for loop work like it should.

Inside mounted i fetch the youtube api then i take the result and map it with a custom function i made

.then(res => {
  this.ytitems = youtubeParser(res);

I display with a v-for and everything is fine.

v-for="(item, index) in ytitems" :key="item.id"

From a new Vue data with other data that i need. I use vue.js 3.

    data: {
      // otherdata: 'example',
      thisindex: 0,
      ytitems: [],
    }

CodePudding user response：

You can just use v-if to check if the ytitems[thisindex] exists.

<img v-if="ytitems[thisindex]" :src="ytitems[thisindex].thumbnailHQ">