时间戳

首页 > 解决方案 > nuxt build 中断 VueJS 事件

javascript - nuxt build 中断 VueJS 事件

问题描述

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

这是我不起作用的示例部分的来源。

改变的@click事件调用view不做任何事情。

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

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

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

在我的生产服务器上nuxt build通过执行运行后npm run 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>

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

标签： javascriptvue.jsdomnpmnuxt.js

解决方案

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

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

推荐阅读