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

新手上路,请多包涵

我的视图刀片 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 许可协议

阅读 468
2 个回答

您需要在 <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();
  }
}

原文由 Decade Moon 发布,翻译遵循 CC BY-SA 3.0 许可协议

在它说 submit is not a function 的情况下,即使你用 $refs 引用它:看起来如果表单控件的名称或 id 为提交,它将掩盖表单的提交方法.在我的例子中,我的提交按钮上有 name="submit" ,我删除了它并且工作正常。

原文由 Angel Miladinov 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题