Nuxt/examples/vue-apollo/pages/car/_id.vue

46 lines
900 B
Vue
Raw Normal View History

<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><nuxt-link to="/">Home page</nuxt-link></p>
</div>
</template>
<script>
2017-08-03 09:20:05 +00:00
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)
}
2017-08-03 09:20:05 +00:00
},
2017-10-31 13:43:55 +00:00
head() {
2017-08-03 09:20:05 +00:00
return {
title: (this.Car ? `${this.Car.make} ${this.Car.model}` : 'Loading')
}
}
}
</script>
<style>
img {
max-width: 600px;
}
</style>