scrimba
Learn Vuetify
Checkout Screen
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Checkout Screen
AboutCommentsNotes
Checkout Screen
Expand for more info
views
Checkout.vue
run
preview
console
<template>
<div>Checkout</div>
</template>

<script>
const ContactInfo = require('../components/checkout/ContactInfo')
const ShippingInfo = require('../components/checkout/ShippingInfo')
const Review = require('../components/checkout/Review')

module.exports = {
components: {
ContactInfo,
ShippingInfo,
Review
},
data() {
return {
step: 1,
checkoutForm: false,
data: {
email: '',
name: '',
phone: '',
street: '',
state: '',
zip: ''
},
rules: {
required: value => !!value || 'Required.',
zip: value => value.length == 5 || 'Must be five characters',
email: value => {
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
return pattern.test(value) || 'Invalid e-mail.'
},
phone: value => {
const pattern = /\d{10}/
return pattern.test(value) || 'Invalid phone number.'
}
}
}
},
methods: {
next() {
this.step += 1
},
previous() {
this.step -= 1
},
submitOrder() {
this.$router.push({ name: 'thankyou' })
}
}
}
</script>
Console
"Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools"
,
"You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html"
,
/index.html#/cart
-18:32