how to access an object element in a vue js list (nuxt)

Question

I have an array of object like that :

{ id: 33617,
  datePublication: 1532266465,
  dateUpdate: 1532266574,
  headline: 'An headline title here',
  images: [ [Object] ] },
{ id: 33614,
  datePublication: 1532265771,
  dateUpdate: 1532271769,
  headline: 'another super headline article',
  images: [ [Object], [Object], [Object], [Object], [Object] ] }

so i iterate that way on my vue js template :

<v-flex v-for="(ip, i) in ips" :key="i" xs12 sm6 >
    <v-card>
      <v-card-media
        :src="ip.images[0].url"
        height="200px"
      />
      <v-card-title primary-title>
        <div>
          <h3 class="headline mb-0">{{ ip.headline }}</h3>
          <div>Located two hours south of Sydney in the <br>Southern Highlands of New South Wales, ...</div>
        </div>
      </v-card-title>
      <v-card-actions>
        <v-btn flat color="orange">Share</v-btn>
        <v-btn flat color="orange">Explore</v-btn>
      </v-card-actions>
    </v-card>  
  </v-flex>

And here is my associated script :

var api = "https://my api.org/news/fr-FR/2018-25-07";
export default {
data() {
return {};
},
layout: "no-live",
async asyncData({ app }) {
  const ips = await app.$axios.$get(api);
  console.log(ips);
  return { ips };
  }
};

Each object in the images array should return me an id and an url, so i want to take that url as a source in my image but i have this error : Cannot read property '0' of undefined

it seems i need to do another loop over the images array, is there a proper way to do that with vue JS ?

are you looking for the first image only?

Daniel
– Daniel

2018-07-25 15:04:57 +00:00
Commented Jul 25, 2018 at 15:04 — Daniel
– Daniel, Commented Jul 25, 2018 at 15:04
yes i only need the url of the first image

yoyojs
– yoyojs

2018-07-25 15:08:31 +00:00
Commented Jul 25, 2018 at 15:08 — yoyojs
– yoyojs, Commented Jul 25, 2018 at 15:08

Daniel · Accepted Answer · 2018-07-25 15:09:23Z

2

if you have any objects in ips that doesn't have images, you would get that error,

you can try to add a conditional to not have an error in rendering

  <v-card-media
    v-if="ip.images && ip.images[0]"
    :src="ip.images[0].url"
    height="200px"
  />

I usually add a <pre>{{ip}}</pre> in these cases to see what's going on.

answered Jul 25, 2018 at 15:09

Daniel

35.9k17 gold badges115 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mako · Accepted Answer · 2018-07-25 15:10:59Z

1

Try put v-if="ip.images" on v-card-media component. You will assure the images are not empty and loaded.

answered Jul 25, 2018 at 15:10

Mako

2422 silver badges6 bronze badges

Collectives™ on Stack Overflow

how to access an object element in a vue js list (nuxt)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related