我是Vue的新手,这将是我第二次try 了解Vue的虚拟项目.

我现在有一个表单,我正在努力阻止表单提交,根据文档,我可以用v-on:submit.prevent个来完成.

我已经将其添加到我的表单标签中,但在提交表单时,它仍在进行,并且根本没有被阻止.

我使用的是Vue 2.1.3版,以下是我目前使用的版本:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node JS Server</title>
</head>
<body id="chat">
    <form v-on:submit.prevent="send">
        <input>
        <button>Send</button>
    </form>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.6.0/socket.io.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.min.js"></script>

    <script>
        var socket = io();

        new Vue({
            el: '#chat',

            methods: {
                send: function(e) {

                    alert('Send method!');

                }
            }
        })
    </script>
</body>
</html>

我做错了什么?据我从文件中所见,该表格不应提交.

Edit

这是一个fiddle,里面有代码

推荐答案

这是工作小提琴:https://jsfiddle.net/xje4r1u8/2/

您需要在HTML中进行以下更改:

<div id="chat">
    <form v-on:submit.prevent="send">
       <input>
       <button>Send</button>
    </form>
</div>    

在你的HTML中,有<body id="chat">个导致了问题,用div个代替这个解决了问题.

Vue.js相关问答推荐

超出最大调用堆栈大小 - Vue路由

Vue 脚本标签中更漂亮的 destruct 功能

路径别名在 vue 脚本块中不起作用

在 Ajax 函数中访问 Vue.js 组件属性

使用 v-slot:body 时 Vuetify v-data-table 没有响应

Object.assign 没有正确复制

W3C 验证和 Vue 的 HTML 绑定语法

webpack模块解析失败意外字符'@'

NuxtServerInit 在 Vuex 模块模式下不起作用 - Nuxt.js

SassError:媒体查询表达式必须以(开头

为 webpack HMR Vue.js 包含来自外部项目文件夹的可导入模块

VS代码中的红点是什么意思

我可以使用react路由创建别名路由吗?

如何将数据传递给 Vue.js 中的路由视图

我如何能够在 vue js html 中以给定格式进行多项 Select 和传递数据?

从 ajax 调用填充 Vue.js 中的下拉列表

Vue.js 中的 CSS 框架

带有 Firebase 云消息传递的 Vue pwa 无法正常工作

Vue Router beforeRouteLeave 不会停止子组件

如何将props传递给组件的故事?