How to get the API response into my listrendering in vue 3?

Question

How to get the data response into my liste in template? I tried a lot. i think there is a big knowledge gap.

please help to solve.

it would be nice if there is a docu about this to read more about

<template> 
  <ul id="example-1">
    <li v-for="item in response" :key="item.data">
        {{ item.data }}
    </li>
  </ul>


    <button class="create-btn" type="submit" v-on:click="getJSON">Submit</button>

  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'OverviewNotification',  
  data () {
    return {
         
    }
  },
   methods: {
    getJSON () {
      axios.get(   
        'https://my-json-server.typicode.com/Gismo1337/form-template-fake-database/events',
        this.JSONContent
      )
      .then(function (response) {
        console.log('Response', response.data)
        
      })
      .catch(function (err) {
        console.log('Error', err)
      })
    }
  }
}
</script>


<style scoped>

</style>

Answer 1

You add a data property that you can populate and then use in your template.

You can read about it here in the Vue docs

<template> 
  <ul v-if="events" id="example-1">
    <li v-for="item in events" :key="item.data">
        {{ item.data }}
    </li>
  </ul>


    <button class="create-btn" type="submit" v-on:click="getJSON">Submit</button>

  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'OverviewNotification',  
  data () {
    return {
       events: null
    }
  },
   methods: {
    getJSON () {
      axios.get(   
        'https://my-json-server.typicode.com/Gismo1337/form-template-fake-database/events',
        this.JSONContent
      )
      .then((response) => {
        this.events = response.data
      })
      .catch((err) => {
        console.log('Error', err)
      })
    }
  }
}
</script>


<style scoped>

</style>