mirror of https://github.com/nuxt/nuxt.git
55 lines
926 B
Vue
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>
|