nuxt build打破了VueJS事件

Question

I'm running a nuxtjs application in production and it's causing some VueJS functionality to break, particular with DOM events. However , development mode works just fine as it should flawlessly, though it is slower than production mode due to the code not being minified and compiled and all that.

• @click events do not fire their functionality
• .prevent does not prevent anything

Here's my source of an example section that does not work.

The @click event calls that change the view do not do anything.

Upon hitting enter to fire 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 shows the GET ?variables )

After looking at the HTML code in the browser to see if there's any logged warnings or errors, there's nothing and nothing on the server side logs.

Plus, the <button> tags that have the @click to fire the login or signup methods do not have any events on them, basically not doing anything; just HTML.

On my production server after running nuxt build by executing npm run build , there are no 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>

Thank you for any help! I've been banging my head for hours.

Answer 1

data proprerty should be a function that return the object. try to do this:

data: function () {
  return {
    view: 'login',
  }
}