我的视图刀片 laravel 是这样的:
<form slot="search" class="navbar-search" action="{{url('search')}}">
<search-header-view></search-header-view>
</form>
view blade laravel调用vue组件(search-header-view组件)
我的 vue 组件(搜索标题视图组件)是这样的:
<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 不是函数
我该如何解决这个错误?
原文由 moses toh 发布,翻译遵循 CC BY-SA 4.0 许可协议
您需要在
<form>
元素(组件的根元素)上调用submit()
:编辑:由于您更新了问题,以上内容不再适用。
要触发按钮点击,只需在按钮元素上调用
click()
:如果您的组件是紧密耦合的,这很好,否则更清洁的解决方案是
$emit
来自您的<search-header-view>
组件的事件并在父组件中响应它,例如这个:在父组件中: