Running a production environment for my nuxtjs application has caused some issues with VueJS functionality, especially with DOM events. Interestingly, the development mode works perfectly fine, albeit slower than the production mode due to lack of minification and compilation.
@clickevents are not triggering their intended actions.preventis not preventing anything
Here's an example section from my source code that is not functioning as expected.
The @click event handlers that should switch the view are not working.
When hitting enter to trigger v-on:keydown.enter="login", it does not get prevented and the form gets submitted as a GET request to the same page (the URL displays the GET ?variables).
Upon inspecting the HTML code in the browser for any logged warnings or errors, there seem to be none, and the server side logs also show no issues.
Additionally, the <button> elements with @click attached to execute login or signup methods do not seem to have any associated events, essentially behaving only as static HTML.
After running nuxt build via npm run build on my production server, there are no visible errors or warnings.
<template>
<div class='card'>
<div class='tabs 2-col'>
<span :class="{active : view != 'signup'}" @click="view = 'login'">
Login
</span>
<span :class="{active : view == 'signup'}" @click="view = 'signup'">
Sign Up
</span>
</div>
<div class='card-body'>
<form v-show="view == 'login'" v-on:keydown.enter="login" novalidate>
<!-- my other html -->
<button @click.prevent="login">Login</button>
</form>
<form v-show="view == 'signup'" v-on:keydown.enter="signup" novalidate>
<!-- my other html -->
<button @click.prevent="signup">Sign Up</button>
</form>
</div>
</div>
</template>
<script>
export default {
data : function(){
return { view : 'login'};
},
methods : {
login: function(){
// my functionality
},
signup:function(){
// my functionality
},
}
}
</script>
Your assistance would be greatly appreciated! I've been struggling with this issue for hours now.