Question

<!DOCTYPE html>

<head>  
    <meta charset=" UTF-8">
    <title> Document</title>
</head>

<body id="chat">    

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.0/socket.io.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>

    <form v-on="submit: send">  
            <input v-model="message"> 

            <button>Send</button>
    </form>



    <script>
        var socket  = io();

        new Vue({
            el: '#chat',

            date: {
                message: ''
            },

            methods: {
                send: function(e)
                {
                    e.preventDefault();
                    alert("a");


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

我希望在提交表单时调用新Vue中定义的send方法，但是当我提交表单时，页面正在重新加载。

我创建了一个Vue对象并将其链接到聊天元素。

我猜e.preventDefault（）无效。

Answer 1

有趣的是，我刚刚帮助了有类似问题的人，Vue.2.0的语法是v-on:submit="send"而不是v-on="submit: send"。 Vue已经停止了提交表单的方式：v-on:submit.prevent所以你不需要e.preventDefault，你会得到：

<form v-on:submit="send" v-on:submit.prevent>

或更短的版本：

<form v-on:submit.prevent="send">

这里还有一些问题，所以我会为你完成这些问题：

首先，您永远不会提交表格。要提交表单，您需要提交输入，而不是按钮：

<input type="submit" value="Send" />

然而，从我所看到的情况来看，您甚至可能不需要表格，只需使用带有v-on的按钮：点击：

<div>
    <input v-model="message"> 
    <button v-on:click="send">Send</button>
</div>

然后获取从视图模型提交的内容：

   send: function()
   {
      alert(this.message);
   }

您还应该使用控制台（在浏览器中的开发人员工具下）并记录任何输出而不是警告（console.log(this.message)），因为它还会嗅出代码中的任何常见错误 - 例如我可以看到你也有一个错字（我总是这样做）它的数据 a 不是dat e ：

   data: {
        message: ''
    },

Answer 2

好的，这个怎么样？

<form  @submit.prevent="send">  
    <input v-model="message"> 
    <button>Send</button>
</form>

然后，您可以从send()方法

中删除阻止默认浏览器操作

提交表单时不会调用新Vue中的发送方法

2 个答案: