I had a Vue question as part of a technical test that I couldn't get my head around.
The task was to create a small login form (username and password) and send the username and password as arguments to the submit function but using the $emit method.
However the question didn’t involve creating any component, so why would you use $emit if you are not passing properties from a child component to a parent? As far as I understand that's the whole purpose of $emit? Can you use emit within a parent element directly? I tried to do so. But couldn't make it work.
My attempt here:
<template>
<div>
<form @submit.prevent="$emit('login', this.username, this.password)">
<input id="username" name="username" type="text" v-model="username">
<input id="password" name="password" type="password" v-model="password">
<button type="submit">Submit</button>
</form>
</div>
</template>
<script>
export default {
name: "App",
data: function () {
return {
username: "",
password: "",
}
},
methods: {
login(arg1, arg2) {
console.log(arg1)
console.log(arg2)
}
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
