109 lines
2.1 KiB
Vue
109 lines
2.1 KiB
Vue
<template>
|
|
<ContentPage heading="The Contact Page Heading">
|
|
|
|
<b-field label="Name">
|
|
<b-input v-model.trim="form.name"
|
|
placeholder="Your name ...">
|
|
</b-input>
|
|
</b-field>
|
|
|
|
<b-field label="Email">
|
|
<b-input v-model="form.email"
|
|
type="email"
|
|
placeholder="Your email ...">
|
|
</b-input>
|
|
</b-field>
|
|
|
|
<b-field label="Subject">
|
|
<b-input v-model="form.subject"
|
|
placeholder="Your subject ...">
|
|
</b-input>
|
|
</b-field>
|
|
|
|
<b-field label="Message">
|
|
<b-input v-model="form.message"
|
|
placeholder="Your message ..."
|
|
type="textarea">
|
|
</b-input>
|
|
</b-field>
|
|
|
|
<button class="button is-success is-outlined"
|
|
@click.prevent="onSubmit"
|
|
:disabled="isDisabled">
|
|
Send
|
|
</button>
|
|
</ContentPage>
|
|
</template>
|
|
|
|
<script>
|
|
import ContentPage from '@/components/ContentPage'
|
|
import { required, email } from 'vuelidate/lib/validators'
|
|
|
|
export default {
|
|
name: 'HomePage',
|
|
|
|
components: {
|
|
ContentPage
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
attemptedSubmit: false,
|
|
form: {
|
|
name: "",
|
|
email: "",
|
|
subject: "",
|
|
message: "",
|
|
}
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
isDisabled () {
|
|
return this.attemptedSubmit && this.$v.form.$invalid
|
|
}
|
|
},
|
|
|
|
validations: {
|
|
form: {
|
|
name: {
|
|
required,
|
|
},
|
|
email: {
|
|
required,
|
|
email
|
|
},
|
|
message: {
|
|
required,
|
|
}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
onSubmit () {
|
|
this.attemptedSubmit = true
|
|
if (this.$v.form.$invalid) {
|
|
this.$toast.open({
|
|
message: 'Please correct errors before submitting.',
|
|
type: 'is-danger'
|
|
})
|
|
return
|
|
}
|
|
this.$toast.open('Submitting your message ...')
|
|
window.setTimeout(() => {
|
|
this.$toast.open({
|
|
message: 'Thank you, your message has been succesfully sent.',
|
|
type: 'is-success'
|
|
})
|
|
this.form.message = ''
|
|
this.form.subject = ''
|
|
}, 1000)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
</style>
|
|
|