vue.js 2를 사용하여 양식을 제출하는 방법

vue.js 2를 사용하여 양식을 제출하는 방법

내 뷰 블레이드 라벨은 다음과 같습니다.

<form slot="search" class="navbar-search" action="{{url('search')}}">
    <search-header-view></search-header-view>
</form>

View 블레이드 laravel call vue 구성 요소(검색 헤더 뷰 구성 요소)

내 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')를 시도합니다.송신()

그러나 콘솔에는 다음과 같은 오류가 있습니다.

TypeError: document.getElementById(...).submit은 함수가 아닙니다.

이 오류를 해결하려면 어떻게 해야 하나요?

전화하셔야 합니다.submit()에서<form>요소(컴포넌트의 루트 요소):

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

라고 쓰여 있는 경우submit is not a function당신이 그것을 언급하고 있음에도 불구하고$refs: 폼 컨트롤에 전송 이름 또는 ID가 있는 경우 폼의 전송 방식을 마스킹합니다.저 같은 경우에는name="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
  }
}

언급URL : https://stackoverflow.com/questions/47878165/how-to-submit-a-form-using-vue-js-2