Wie schicke ich ein Formular mit vue.js 2?

Question

Meine Ansicht Klinge Laravel wie folgt aus:

<form slot="search" class="navbar-search" action="{{url('search')}}"> 
    <search-header-view></search-header-view> 
</form> 

Die Laravel Anruf vue Komponentensicht Klinge (Suche-header-View-Komponente)

Meine vue Komponente (search-header-view-Komponente) wie folgt aus:

<template> 
    <div class="form-group"> 
     <div class="input-group"> 
      <input type="text" class="form-control" placeholder="Search" name="q" autofocus v-model="keyword"> 
      <span class="input-group-btn"> 
       <button class="btn btn-default" type="submit" id="submit-search"><span class="fa fa-search"></span></button> 
      </span> 
      <ul v-if="!selected && keyword"> 
       <li v-for="state in filteredStates" @click="select(state.name)">{{ state.name }}</li> 
      </ul> 
     </div> 
    </div> 
</template> 
<script> 
    export default { 
     name: 'SearchHeaderView', 
     data() { 
      return { 
       baseUrl: window.Laravel.baseUrl, 
       keyword: null, 
       selected: null, 
       filteredStates: [] 
      } 
     }, 
     watch: { 
      keyword(value) { 
       this.$store.dispatch('getProducts', { q: value }) 
       .then(res => { 
        this.filteredStates = res.data;   
       }) 
      } 
     }, 
     methods: { 
      select: function(state) { 
       this.keyword = state 
       this.selected = state 
       document.getElementById('submit-search').submit() 
      }, 
      input: function() { 
       this.selected = null 
      } 
     },  
    } 
</script> 

ich möchte das Formular abzuschicken, wenn der Benutzer das Stichwort klicken

ich document.getElementById versuchen ('submit-Suche'). einreichen()

Aber auf der Konsole vorhanden sind Fehler wie folgt aus:

TypeError: document.getElementById(...).submit is not a function

Wie kann ich lösen diesen Fehler?

Answer 1

Sie benötigen submit() auf dem <form> Element zu nennen (was das Wurzelelement des Bauteils ist):

this.$el.submit(); 

---

EDIT: Da Sie Ihre Frage aktualisiert haben, die oben nicht mehr gilt.

eine Schaltfläche klicken, um auslösen, rufen Sie einfach click() auf die Schaltfläche Element:

<button ref="submitButton">Foo</button> 

this.$refs.submitButton.click(); 

Das ist in Ordnung, wenn Ihre Komponenten eng gekoppelt werden sollen, sonst eine sauberere Lösung $emit wäre ein Ereignis von Ihrem <search-header-view> Komponente und reagieren auf sie in der übergeordneten Komponente, wie folgt aus:

this.$emit('submit'); 

in Stammkomponente:

<search-header-view @submit="submit"> 

methods: { 
    submit() { 
    // Submit the form manually here (add a ref to your form element) 
    this.$refs.form.submit(); 
    } 
} 

Answer 2

Geben Sie einfach die @submit Zuhörer auf Ihre Form:

<form slot="search" class="navbar-search" @submit="submited"> 
    <search-header-view></search-header-view> 
</form> 

und die damit verbundene Methode:

methods: { 

    submited (e) { 
    // e is the form, do your things on submit 
    } 
}