vuejsでのフォームのデフォルトの動作を防ぐ

debugcn 投稿 Dev

codernoob6

フォームを使用してvueappを構築しているのですが、.preventに組み込まれているvueJSを使用してhtml5フォームのデフォルトの動作を防ぐ方法はないのでしょうか。私が試してみました<form.prevent>し、<form v-on:submit.prevent>しかし無駄に。ここで何か助けがあれば素晴らしいでしょうか？

ghybs

v-onディレクティブ（短縮形は@）VueのインスタンスにバインドするメソッドまたはイベントにJSの発現：

イベントリスナーを要素にアタッチします。[…]式は、メソッド名、インラインステートメント、または修飾子が存在する場合は省略できます。

したがって、メソッドまたは式/インラインステートメントを指定しなくても、.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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]