vue에서 form-submit하기

Vue

기존의 html, javascript에서는 form을 전송할 때 쉽게 document.form.submit을 하면 되는데 vue에서는 document가 인식되지 않아서, 의미도 달라서 찾아봤다.

Vue + Typescript에서 form submit

<template lang="pug">
  form(
    name="form",
    method="POST",
    ref="reqKmcForm",
    action="action-url"
  )  
    form-group(linine label="이름")
      v-layout(row, wrap)
        v-flex(xs8)
          text-field(
            placeholder="이름",
            v-model="name",
            name="name"
          )

  v-btn(@click="next") 다음
</template>

<script lang="ts">
...
export default class SignUpPage extends Vue {
  $refs!: {
    reqKmcForm: HTMLFormElement
  }

  next() {
  this.$refs.reqKmcForm.submit()
}
</script>

Vue에서는 $refs를 통해 DOM에 접근할 수 있다.

참고

• stack overflow
• js fiddle