How to display only one element of an array in Vue.js?

Question

I have the following object with a "multimedia" array:

I only need one of the urls, but no idea how ot get it

    <div
          class="card mb-3"
          style="max-width: 540px;"
          v-bind:key="news.artices"
          v-for="news in newsList" >
    
          <div class="row no-gutters">
            <div class="col-md-8">
              <div class="card-body">
    
               //this doesn't work
                <p v-for="image in news.multimedia" v-bind:key="image">
                    {{image[0].url}} 
                </p>
    
               //this works, but shows all
                <p v-for="image in news.multimedia" v-bind:key="image">
                    {{image.url}} 
                </p>
    
                <h5 class="card-title">{{news.title}}</h5>               
              </div>
            </div>
          </div>
        </div>

palaѕн · Accepted Answer · 2020-04-03 15:40:46Z

4

If you want to display only one element of the multimedia array, then you don't need to use v-for unnecessarily. You can simply use:

<p v-bind:key="image" v-if="news.multimedia && news.multimedia.length">
   {{ news.multimedia[0].url }} 
</p>

Also, you can use v-if to make sure this div is only rendered if news.multimedia has a valid value and it not an empty array.

answered Apr 3, 2020 at 15:40

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

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

Comments

D Malan · Accepted Answer · 2020-04-03 15:35:33Z

1

It looks like multimedia is an array of objects, so you could do: news.multimedia[0].url.

answered Apr 3, 2020 at 15:35

D Malan

11.6k3 gold badges35 silver badges65 bronze badges

Collectives™ on Stack Overflow

How to display only one element of an array in Vue.js?

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