Testing Vue 3 Components - LoginForm.vue

LoginForm.vue

<script>
export default {
  name: 'LoginForm',
  emits: ['submit'],
  data() {
    return {
      formData: {
        username: '',
        password: '',
      },
    }
  },
  methods: {
    handleSubmit() {
      if (this.formData.username !== '' && this.formData.password !== '') {
        this.$emit('submit', this.formData)
      }
    },
  },
}
</script>

<template>
  <form @submit.capture.prevent.stop="handleSubmit">
    <label>
      Username
      <input name="username" v-model="formData.username" />
    </label>
    <label>
      Password
      <input name="password" v-model="formData.password" />
    </label>
    <button type="submit">Login</button>
  </form>
</template>