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

Posted 2023-02-23

【中文标题】如何使用 vue.js 2 提交表单？

【英文标题】：How to submit a form using vue.js 2?

【发布时间】：2018-06-01 08:50:49

【问题描述】：

我的视图刀片 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 不是函数

我该如何解决这个错误？

【问题讨论】：

你试过vue提供的事件监听器@submit吗？而不是:action ?

@John Rey M. Baylen，我更新了我的问题。所以从组件中标记表单

【参考方案1】：

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

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

【讨论】：

它不起作用。存在错误：TypeError: this.$el.submit is not a function

我再次需要你的帮助。看看这个：***.com/questions/47879651/…

【参考方案2】：

如果它说submit is not a function，即使您用$refs 正确引用它： 看起来如果表单控件具有提交的名称或 ID，它将掩盖表单的提交方法。 在我的情况下，我的提交按钮上有name="submit"，我删除了它，它工作正常。

【参考方案3】：

只需为您的表单提供@submit 侦听器即可：

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

以及相关的方法：

methods: 
  submited (e) 
    // e is the form event, e.target is the form, do your things on submit