Форма submit не предотвращается при попытке интегрировать VueJS с SemanticUI

Question

Я пытаюсь интегрировать SemanticUI с Vue, и у меня есть компонент входа с формой в нем.

Я добавил v-on:submit.prevent="onSubmit" к форме, но когда я нажимаю кнопку ввода в одном из полей формы, форма все еще отправляется, и мой метод, т. Е. Никогда не вызывался.

В основном, что я пытаюсь сделать, это реплицировать событие on("submit" из jQuery.

Любая идея, в чем проблема?

main.js

import Vue  from "vue"; 
import VueRouter from "vue-router"; 
import App  from "./App"; 

Vue.use(VueRouter); 

new Vue({ 
    el  : "#app", 
    template : "<App/>", 
    components: { App } 
}); 

и Login.vue

<template> 
    <div class="ui middle aligned center aligned grid"> 
     <div class="column"> 
      <h2 class="ui teal header"> 
       Login 
      </h2> 

      <form class="ui large form login" v-on:submit.prevent="onSubmit"> 
       <div class="ui stacked segment"> 
        <div class="field"> 
         <div class="ui left icon input"> 
          <i class="cloud icon"></i> 
          <input type="text" name="hostname" placeholder="Hostname" value=""> 
         </div> 
        </div> 

        <div class="field"> 
         <div class="ui left icon input"> 
          <i class="user icon"></i> 
          <input type="text" name="username" placeholder="Username" value=""> 
         </div> 
        </div> 

        <div class="field"> 
         <div class="ui left icon input"> 
          <i class="lock icon"></i> 
          <input type="password" name="password" placeholder="Password" value=""> 
         </div> 
        </div> 

        <div class="ui fluid large teal submit button">Login</div> 
       </div> 
      </form> 
     </div> 
    </div> 
</template> 

<script> 
    export default { 
     name: "login", 

     mounted: function() { 
      this.$nextTick(function() {  
       jQuery(this.$el).find("form").form({ 
        fields: { 
         hostname: { 
          identifier: "hostname", 
          rules  : [{ 
           type : "empty", 
           prompt: "Please enter the instance hostname" 
          }] 
         }, 

         username: { 
          identifier: "username", 
          rules  : [{ 
           type : "empty", 
           prompt: "Please enter your username" 
          }] 
         }, 

         password: { 
          identifier: "password", 
          rules  : [{ 
           type : "empty", 
           prompt: "Please enter your password" 
          }] 
         } 
        } 
       }); 
      }); 
     }, 

     methods: { 
      onSubmit: function(e) { 
       alert("ok"); 
      } 
     } 
    }; 
</script> 

Answer 1

форма представит на клавишу ENTER, если оно имеет одно из следующих действий:

• button внутри, безtype="button"
• input тег с type="submit"

Твоей форме, кажется, не имеют либо из вышеперечисленного. Но если у вас есть кнопка представить в другом месте, здесь, как вы можете избежать отправки формы:

<form onsubmit="return false;"> 
    <input type="text" placeholder="Host Name" v-model="hostName"> 
    <input type="text" placeholder="User Name" v-model="userName"> 
    <input type="password" placeholder="Password" v-model="password"> 
    <input type="submit" value="Submit form"> 
</form> 

Обратите внимание, что форма имеет onsubmit="return false;", которая предотвращает случайное представление.

Это не мешает вам использовать метод в компоненте Вьет, инициированный с помощью кнопки с помощью @click="submitLoginForm()", чтобы сделать представление, используя this.$http.post(...)