how to rendering data from api in vue.js

Question

I am new to vue.js I am going to make a news app using a API. In here I used v-for to iterate some codes. I think there is a problem in v-for . because it gives error. error has been included end of this question. I used following codes to show search results

    <template>
      <div class="col-md-12">
         <div>
           <h2>Results</h2>
              <div class="card mb-3" v-for="item in resultList">
              <img class="card-img-top" src="" alt="Card image cap" height="100" width="200">
              <div class="card-body">
        <h5 class="card-title">{{ item.name }}</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <div class="button">
          <button type="button" class="btn btn-primary">Show more</button>
        </div>
        </div>
      </div>
       </div>
    </div>
     </template>
     <script>
     export default{
       props: ['resultList']
    }
</script>

following codes used to get the api data(search api data)

<template>
         <div class="container1">
         <div class="form-group row">
            <label for="exampleInputPassword1">Search Music</label>
         <div class="col-lg-10">
         <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Type here" 
      @input="keypressed">
      </div>
      </div>
      </div>
     </template>
   <script>
      import axios from 'axios'
     export default{
      data () {
      return {
       newset: []
       }
       },
      methods: {
        keypressed () {
        var key = event.target.value
        axios.get('http://newsapi.org/v2/everything?q=' + key + 
       '&sortBy=publishedAt&apiKey=b5ac77726d0a4460bd82b57210b2efb7')
        .then(response => {
           this.newset = response.data.articles
         })
       .catch(e => {
           this.error.push(e)
         })
        this.$emit('newDataset', this.newset)
       }
       }
       }
      </script> 

but it gives an error. error is

      https://google.com/#q=vue%2Frequire-v-for-key  Elements in iteration expect to have 'v- 
      bind:key' 
     directives
     src\components\ResultArea.vue:5:5
     <div class="card mb-3" v-for="item in resultList">
      ^  

Answer 1

You need to add :key binding:

<div class="card mb-3" v-for="(item, index) in resultList" :key="index">

key value should be unique for every item. If your list items has any id it is good idea to use this id here:

<div class="card mb-3" v-for="item in resultList" :key="item.id">

Answer 2

To give Vue a hint so that it can track each node's identity, and thus reuse and reorder existing elements, you need to provide a unique key attribute for each item. check the link for better understanding https://v2.vuejs.org/v2/guide/list.html#Maintaining-State