source

Vue.js에서 폼 기본 동작 방지

factcode 2022. 8. 19. 20:44
반응형

Vue.js에서 폼 기본 동작 방지

폼을 사용하여 Vue.js 앱을 만들고 있는데 내장 Vue.js를 사용하여 HTML 5 폼의 디폴트 동작을 방지하는 방법이 없을까요?.prevent노력했습니다.<form.prevent>그리고.<form v-on:submit.prevent>하지만 소용없었다.도움이 필요하신가요?

지시(간단)@)는 Vue 인스턴스 메서드 또는 JS 식을 이벤트에 바인드하는 것입니다.

이벤트 리스너를 요소에 연결합니다.[…] 메서드 이름, 인라인 문 또는 수식자가 있는 경우 생략할 수 있습니다.

따라서 메서드 또는 식/inline 문을 지정하지 않아도,.prevent수식자는 어떤 경우에도 기능해야 합니다.

new Vue({
  el: '#app',
  methods: {
    formSubmit() {
      console.log('form submitted');
    },
  },
});
<script src="https://unpkg.com/vue@2"></script>

<div id="app">
  <form @submit.prevent>
    <span>Form WITH submit.prevent and no expression attached</span>
    <button type="submit">Submit form</button>
  </form>
  <form @submit.prevent="formSubmit">
    <span>Form WITH submit.prevent</span>
    <button type="submit">Submit form</button>
  </form>
  <form @submit="formSubmit">
    <span>Normal form without prevent</span>
    <button type="submit">Submit form</button>
  </form>
</div>

언급URL : https://stackoverflow.com/questions/51642232/prevent-form-default-behavior-in-vue-js

반응형