I made a VUE component button and tried to associate a v-on:click function, but it didn't work. Then I substituted it for an HTML button and it did work. I need to understand why.
I made this button component, which was loading ok on it's parent
<template>
<button v-on:click="action">{{ name }}</button>
</template>
<script>
export default {
name: "Appbutton",
data: function() {
return {};
},
props: {
name: String,
}
};
</script>
The code didn't fail when loaded by its parent:
<template>
<form class="login-form" action>
<label for="email">Register E-mail</label>
<input type="email" name="email" v-model="email" />
<label for="password">Register Password</label>
<input type="text" name="password" v-model="password" />
<div class="button-group">
<AppButton action="register" name="Login" />
<AppButton action="register" name="Login with Google" />
</div>
</form>
</template>
<script>
import AppButton from "@/components/AppButton";
export default {
name: "RegisterForm",
data() {
return {
email: "",
password: "",
show: true
};
},
methods: {
register: function(e) {
console.log("registered");
e.preventDefault();
}
},
components: {
AppButton
}
};
</script>
When pressed the "Login" button, it reloaded the page with the parameters email and password in the URL but the console.log was not displayed nor triggered anywhere. I tried sending the "register" function as a prop to the AppButton.vue but it had the same behaviour.
It only worked when I substituted the button component for a regular HTML button. Now it works as expected.
I just need to understand why is this behaviour, and how should I have to solve it?
Thanx in advance.
