사용자가 콤보박스로 선택한 값은 v-model 디렉티브로 양방향 데이터 바인딩만 해도 알 수 있습니다. 하지만 선택한 값에 따라 가격을 다르게 나타내는 것은 v-model 디렉티브만으로는 할 수 없습니다. 이럴 때 예제 코드처럼 change 이벤트를 사용하면 사용자가 선택한 값에 따른 처리를 추가할 수 있습니다.

● submit 이벤트

submit 이벤트는 <form> 태그에 사용한 폼 요소의 데이터를 서버로 전송하는 시점에서 발생하는 이벤트입니다. 일반적으로 <form> 태그는 submit 이벤트가 발생할 때 action 속성에 명시된 주소로 페이지를 이동합니다. 그런데 뷰에서는 페이지 이동 없이 AJAX 기술을 사용해 폼 데이터를 전송하기 때문에 다음 코드와 같이 이벤트 객체의 preventDefault() 메서드를 함께 사용합니다.

submit/src/App.vue

<script>
export default {
  methods: {

    onSubmitHandler(e) {
      e.preventDefault();
      // 별도의 폼 전송 처리
      console.log('onSubmit Handler!');
    },