marc-leopold/pages/contact.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>