mirror of https://github.com/nuxt/nuxt.git
50 lines
926 B
Vue
50 lines
926 B
Vue
<template>
|
|
<div v-if="Car">
|
|
<h3>{{ Car.make }} {{ Car.model }}</h3>
|
|
<p>{{ formatCurrency(Car.price) }}</p>
|
|
<img :src="Car.photoURL" :alt="`${Car.model} photo`">
|
|
<p>
|
|
<NuxtLink to="/">
|
|
Home page
|
|
</NuxtLink>
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import car from '~/apollo/queries/car'
|
|
|
|
export default {
|
|
apollo: {
|
|
Car: {
|
|
query: car,
|
|
prefetch: ({ route }) => ({ id: route.params.id }),
|
|
variables() {
|
|
return { id: this.$route.params.id }
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
formatCurrency(num) {
|
|
const formatter = new Intl.NumberFormat('en-US', {
|
|
style: 'currency',
|
|
currency: 'USD',
|
|
minimumFractionDigits: 2
|
|
})
|
|
return formatter.format(num)
|
|
}
|
|
},
|
|
head() {
|
|
return {
|
|
title: (this.Car ? `${this.Car.make} ${this.Car.model}` : 'Loading')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
img {
|
|
max-width: 600px;
|
|
}
|
|
</style>
|