nuxt build 中断 VueJS 事件

Question

我正在生产中运行一个 nuxtjs 应用程序，它导致一些 VueJS 功能中断，尤其是 DOM 事件。 然而，开发模式运行良好，应该完美无缺，但由于代码没有被压缩和编译等等，它比生产模式慢。

• @click 事件不会触发其功能
• .prevent 不会阻止任何事情

这是我无法使用的示例部分的来源。

更改view 的@click 事件调用不执行任何操作。

在按下回车键以触发v-on:keydown.enter="login" 时，它不会被阻止，并且表单会作为GET 请求提交到同一页面（URL 显示GET ?variables）

在浏览器中查看 HTML 代码以查看是否有任何记录的警告或错误后，服务器端日志中什么也没有，也没有任何内容。

另外，带有@click 来触发登录或注册方法的<button> 标签上没有任何 事件，基本上什么都不做；只是 HTML。

在我的生产服务器上通过执行npm run build 运行nuxt build 后，没有没有错误或警告。

<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>

感谢您的帮助！我已经敲了好几个小时了。

Answer 1

data 属性应该是一个返回对象的函数。尝试这样做：

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