Vue 구성 요소를 사용하여 Laravel/Vue.js 간단한 양식 제출.

Vue는 사용자 인터페이스를 구축하기 위한 진보적인 프레임워크입니다. 최신 버전의 Laravel을 사용했다면 Laravel에 표준 번들로 제공된다는 것을 눈치채셨을 것입니다. Vue.js를 사용하여 양식을 제출하는 간단하면서도 효율적인 방법을 보여 드리겠습니다.

이 기사에서는 Laravel 5.6을 사용하고 있습니다. Laravel을 설치하려면 https://laravel.com/docs/5.6#installation 을 방문하십시오.

폴더로 이동하여 시작하겠습니다.
/resources/assets/js/components는 ExampleComponent.vue가 이미 포함되어 있음을 알 수 있습니다./resources/assets/js/app.js로 이동하면 파일이 Vue에 구성 요소로 등록되는 것을 볼 수 있습니다. 또한 Vue는 그 아래에 인스턴스화되고 ID가 'app'인 요소를 둘러쌉니다. 물론 이 요소 내에서만 Vue를 사용할 수 있다는 것을 아는 것이 좋습니다.

그래서.. 예제 컴포넌트를 사용하고 싶다고 가정해 봅시다. 그런 다음 이 html 요소를 html에 추가하기만 하면 됩니다. ID가 'app'인 래퍼 안에 있는지 확인하십시오.

실수를 피하기 위해 구성 요소, Javascript 또는 SCSS 파일을 편집할 때. 'npm run dev' 이상을 실행하는 것을 잊지 말고 'npm run watch'를 사용하여 계속 실행하십시오.

/resources/assets/js/components 안에 새 구성 요소 파일을 만들고 이름을 'ContactForm.vue'로 지정하겠습니다. 분명히 연락처 양식을 만들 것이므로..

컴포넌트 파일 ContactForm.vue 안에 HTML 템플릿 부분을 추가할 것입니다. 블레이드 파일에서와 마찬가지로 내부에 다음과 같이 래핑됩니다.

*


이름

    <div class="form-group">
        <label for="email">E-mail</label>
        <input type="email" class="form-control" name="email" id="email" />
    </div>

    <div class="form-group">
        <label for="message">Message</label>
        <textarea class="form-control" name="message" id="message" rows="5"></textarea>
    </div>

    <button type="submit" class="btn btn-primary">Send message</button>
</form>

*

[전체 블로그 읽기 )여기]( https://medium.com/@mscherrenberg/laravel-5-6-vue-js-simple-form-submission-using-components-92b6d5fd4434