Nuxt/examples/with-apollo/pages/car/_id.vue
2017-04-13 11:36:03 +02:00

55 lines
926 B
Vue

<template>
<div>
<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>
import client from '~plugins/apollo'
import gql from 'graphql-tag'
export default {
async asyncData({ params }) {
let { data } = await client.query({
query: gql`
query {
Car(id: "${params.id}") {
make
model
photoURL
price
}
}
`
})
return {
car: data.Car
}
},
methods: {
formatCurrency(num) {
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 2
})
return formatter.format(num)
}
}
}
</script>
<style>
img {
max-width: 600px;
}
</style>