mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-17 19:25:13 +00:00
31 lines
535 B
Vue
31 lines
535 B
Vue
|
<template>
|
||
|
|
<p v-if="$fetchState.error">
|
||
|
|
Could not fetch Author
|
||
|
|
</p>
|
||
|
|
<p v-else>
|
||
|
|
Written by {{ $fetchState.pending ? '...' : user.name }} <button @click="$fetch">
|
||
|
|
Refresh
|
||
|
|
</button>
|
||
|
|
</p>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
userId: {
|
||
|
|
type: Number,
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async fetch () {
|
||
|
|
this.user = await this.$http.$get(`https://jsonplaceholder.typicode.com/users/${this.userId}`)
|
||
|
|
},
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
user: {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
fetchOnServer: false
|
||
|
|
}
|
||
|
|
</script>
|