I couldn't find a similar issue online, so here's my problem. I'm trying to create a form for receiving contact from an app using Vue.js 2 and TypeScript.
Here is my code:
<form ref="form" class="form-data" @submit.prevent="sendEmail">
<input
type="text"
name="name"
v-model="name"
class="name"
placeholder="your firstname + lastname"
/>
<input
type="email"
name="email"
v-model="email"
class="email infos"
placeholder="your email"
/>
<textarea
class="message"
name="message"
v-model="message"
placeholder=" your message">
</textarea>
<input class="btn" type="submit" @click.prevent value="Contact me" />
</form>
Script section:
<script lang='ts'>
import {
Component,
Vue,
} from 'vue-property-decorator';
import emailjs from 'emailjs-com';
@Component({
components: {},
})
export default class Contact extends Vue {
private name = '';
private email = '';
private message = '';
public sendMail() {
emailjs.sendForm(
'service_ID',
'template_ID',
this.$refs.form,
'user_ID'
)
.then((result) => {
console.log('SUCCESS!', result.text);
}, (error) => {
console.log('FAILED...', error.text);
});
this.name = '',
this.email = '',
this.message = '',
}
</script>
I tried creating an object with my input values instead of using this.$ref, but encountered an error stating "expected 3-4 arguments, not 5."
Additionally, ESLint gave me a parsing error saying "Expression expected," and I also faced a Type error:
"Argument of type 'Vue | Element | (Vue | Element)[] | undefined' is not assignable to parameter of type 'string | HTMLFormElement'.
Type 'undefined' is not assignable to type 'string | HTMLFormElement'"
If anyone can offer assistance, I would greatly appreciate it. Thank you!