HelloWorld.vue

<template>
  <div class="hello">
    <h1 @click="createSupplier">{{ msg }}</h1>
    <h2 v-for="supplier in suppliers" :key="supplier.id">{{supplier.name}}</h2>
  </div>
</template>

<script>
import axios from 'axios' // == const axios = require('axios')

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data:() => ({
    suppliers: []
  }),
  methods: {
    premosse(a) {
      return new Promise((resolve, reject) => {
        if(a > 2) {
          resolve('OK')
        } else {
          reject('KO')
        }
      })
    },
    async getApi() {
      try {
        const response2 = await axios.get('https://api-suppliers.herokuapp.com/api/suppliers')
        console.log(response2)
        this.suppliers = response2.data
      } catch(err) {
        console.log(err)
      }
      console.log('après')
    },
    createSupplier() {
      axios.post('https://api-suppliers.herokuapp.com/api/suppliers', {
        name: 'Ca part en 🥜 grave',
        checkedAt: new Date(),
        status: true,
        latitude: 45,
        longitude: 5
      })
      .then(response => {
        console.log(this)
        this.getApi()
      })
      .catch(error => console.error(error))
    }
  },
  mounted() {
    this.getApi()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>


action(async function() {
  
})