[英]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.