I'm trying to add a contact form with simple validation on a website built with Vue.js using a Vuetify.js example. I'm a newbie, so I'm not sure how it should be implemented in a Vue component.

I want to achieve a simple client side form validation and make it work with a https://getform.org/ form.

UPDATED:

Code | Contact.vue

(taken from Vuetify.js form example)

<v-form v-model=valid>

      <v-text-field

        label=Name

        v-model=name

        :rules=nameRules

        :counter=10

        required

        name=Name

      ></v-text-field>



      <v-text-field

        label=E-mail

        v-model=email

        :rules=emailRules

        required

        name=Email

      ></v-text-field>



      <v-btn

          @click=submit

          :disabled=!valid

      >submit</v-btn>

  </v-form>



  <form method=post action=https://www.getform.org/f/[MY_ID_HERE] id=nativeForm></form>

Script

<script>

export default {

  name: 'contact',



  data () {

    return {

      snackbar: true, 

      valid: false,

        name: '',

        nameRules: [

          (v) => !!v || 'Name is required',

          (v) => v.length <= 10 || 'Name must be less than 10 characters'

        ],

        email: '',

        emailRules: [

          (v) => !!v || 'E-mail is required',

          (v) => /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(v) || 'E-mail must be valid'

        ]

      }

    },

    methods: {

      submit() {

        nativeForm.submit()

      }

    }

  }

</script>