45 lines
1.0 KiB
Vue
45 lines
1.0 KiB
Vue
<template>
|
|
<div>
|
|
<div class="greeting">Hello {{name}}{{exclamationMarks}} :D</div>
|
|
<button @click="decrement">-</button>
|
|
<button @click="increment">+</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import Vue from "vue";
|
|
import Axios from "axios";
|
|
|
|
export default Vue.extend({
|
|
props: ['name', 'initialEnthusiasm'],
|
|
data() {
|
|
return {
|
|
enthusiasm: this.initialEnthusiasm,
|
|
}
|
|
},
|
|
methods: {
|
|
increment() { this.enthusiasm++; },
|
|
decrement() {
|
|
if (this.enthusiasm > 1) {
|
|
this.enthusiasm--;
|
|
}
|
|
Axios.get("https://jsonplaceholder.typicode.com/posts/1").then(resp => {
|
|
if (resp == null) {} else {
|
|
console.log(resp.data);
|
|
}}).catch(() => console.log("Uh ohhh"));
|
|
|
|
},
|
|
},
|
|
computed: {
|
|
exclamationMarks(): string {
|
|
return Array(this.enthusiasm + 1).join('!');
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.greeting {
|
|
font-size: 20px;
|
|
}
|
|
</style> |