Soumettre le formulaire n'est pas empêché en essayant d'intégrer VueJS avec SemanticUI

Question

J'essaie d'intégrer SemanticUI avec Vue et j'ai un composant Login avec un formulaire dedans.

J'ai ajouté v-on:submit.prevent="onSubmit" au formulaire mais lorsque j'appuie sur la touche Entrée dans l'un des champs du formulaire, le formulaire est toujours envoyé et ma méthode n'est jamais appelée.

Fondamentalement, ce que j'essaie de faire est de répliquer l'événement on("submit" à partir de jQuery.

Une idée quel est le problème?

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 } 
}); 

et 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

Un formulaire soumettra sur ENTRER clé si elle a une des opérations suivantes:

• un button à l'intérieur, sanstype="button"
• une étiquette input avec type="submit"

Votre formulaire ne semble pas avoir soit de ce qui précède. Mais en supposant que vous avez un bouton d'envoi ailleurs, voici comment vous pouvez éviter la forme soumettre:

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

Notez que le formulaire a onsubmit="return false;" qui empêche la soumission accidentelle.

Cela ne vous empêche pas d'utiliser une méthode dans le composant Vue, initiée par un bouton à l'aide @click="submitLoginForm()", pour faire la présentation à l'aide this.$http.post(...)