如何使用vue.js 2提交表单？

Question

我的视图刀片laravel是这样的：

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

视图刀片laravel调用vue组件（search-header-view组件）

我的vue组件（search-header-view组件）是这样的：

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

我想在用户点击关键字时提交表单

我尝试document.getElementById（'submit-search'）。submit（）

但在控制台上存在如下错误：

TypeError：document.getElementById（...）。submit不是函数

我该如何解决这个错误？

Answer 1

你需要在submit()元素（它是组件的根元素）上调用<form>：

this.$el.submit();

---

编辑：由于您已更新您的问题，以上不再适用。

要触发按钮单击，只需在按钮元素上调用click()：

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

this.$refs.submitButton.click();

如果您的组件要紧密耦合，这很好，否则更清洁的解决方案是$emit来自<search-header-view>组件的事件并在父组件中响应它，如下所示：

this.$emit('submit');

在父组件中：

<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

只需在表单中提供@submit监听器：

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

以及相关的方法：

methods: {

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