VueList

by abhijeetkarve

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.cjs.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js"></script>
<div id="app">

  <div v-for="(receipes, index) in results.slice(0,5)">
   <div>
      <div>
        <p>Id: {{ index + 2 }} </p>
      </div>
      <div>
        <p>Name: {{ receipes.title }}</p>
      </div>
      <div>
        <p> Author: {{ receipes.cuisine }}</p>
      </div>
    </div>
  </div>

</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

window.onload = function () {
//const url = "https://whispering-woodland-9020.herokuapp.com/getAllBooks";
//const url = "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR";

const url = "https://sampleapis.com/recipes/api/recipes";

const vm = new Vue({
        el: '#app',
        data: {
          results: []
        },
        mounted() {
          axios.get(url).then(response => {
            this.results = response.data
          })
        }
      });
}