簡體   English   中英

如何使用 vue.js 2 提交表單?

[英]How to submit a form using vue.js 2?

我的視圖刀片 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()

但是在控制台上存在這樣的錯誤:

類型錯誤:document.getElementById(...).submit 不是函數

我該如何解決這個錯誤?

您需要在<form>元素(它是組件的根元素submit()上調用submit() ):

this.$el.submit();

編輯:由於您更新了您的問題,因此上述內容不再適用。

要觸發按鈕點擊,只需在按鈕元素上調用click()

<button ref="submitButton">Foo</button>
this.$refs.submitButton.click();

如果您的組件是緊密耦合的,這很好,否則更簡潔的解決方案是從您的<search-header-view>組件中$emit一個事件並在父組件中響應它,如下所示:

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

只需為您的表單提供@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
  }
}

如果它說submit is not a function即使您使用$refs正確引用它:看起來如果表單控件的名稱或 id 為 submit,它將屏蔽表單的提交方法。 在我的情況下,我的提交按鈕上有name="submit" ,我刪除了它並且它工作正常。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM