Created
June 21, 2020 18:05
-
-
Save sorin-costea/29ea39b88ac7860d84d6d0fe43444489 to your computer and use it in GitHub Desktop.
Vue.js if you're not a frontend developer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Vue test</title> | |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" | |
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> | |
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> | |
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> | |
</head> | |
<body> | |
<div id="petApp" class="container-fluid"> | |
<div class="row"> | |
<pet-item v-for="item in petList" v-bind:pet="item" v-bind:key="item.id"></pet-item> | |
</div> | |
</div> | |
<script type="text/javascript"> | |
Vue.component('pet-item', { | |
props : [ 'pet' ], | |
template: ` | |
<div class="col-lg-2 col-md-3 col-sm-6"> | |
<div class="card"> | |
<div class="card-body"> | |
<h3 class="card-title">{{ pet.name }}</h3> | |
<div class="card-text">ID: {{ pet.id }}</div> | |
</div> | |
</div> | |
</div> | |
` | |
}) | |
var petApp = new Vue({ | |
el : '#petApp', | |
data () { | |
return { | |
petList: null | |
} | |
}, | |
mounted () { | |
axios | |
.get('https://petstore3.swagger.io/api/v3/pet/findByStatus?status=available') | |
.then(response => { | |
console.log(response.data) | |
this.petList = response.data | |
}) | |
.catch(error => { | |
console.log(error) | |
}) | |
.finally(() => this.loading = false) | |
} | |
}) | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment