title: How to display only one element of an array in Vue.js?
body: <p>I have the following object with a &quot;multimedia&quot; array:</p>
  <p><a href="https://i.stack.imgur.com/xH9qE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xH9qE.jpg" alt="nytimes api" /></a></p>
  <br>
  <p>I only need one of the urls, but no idea how ot get it</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;div
            class=&quot;card mb-3&quot;
            style=&quot;max-width: 540px;&quot;
            v-bind:key=&quot;news.artices&quot;
            v-for=&quot;news in newsList&quot; &gt;
      
            &lt;div class=&quot;row no-gutters&quot;&gt;
              &lt;div class=&quot;col-md-8&quot;&gt;
                &lt;div class=&quot;card-body&quot;&gt;
      
                 //this doesn't work
                  &lt;p v-for=&quot;image in news.multimedia&quot; v-bind:key=&quot;image&quot;&gt;
                      {{image[0].url}} 
                  &lt;/p&gt;
      
                 //this works, but shows all
                  &lt;p v-for=&quot;image in news.multimedia&quot; v-bind:key=&quot;image&quot;&gt;
                      {{image.url}} 
                  &lt;/p&gt;
      
                  &lt;h5 class=&quot;card-title&quot;&gt;{{news.title}}&lt;/h5&gt;               
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>