Q&A
前提・実現したいこと
現在、Vue.jsの勉強をしているのですがformにつけたイベント修飾子@submit.preventが効かなくて困っています。
テキストフィールドに入力した内容をconsole.log()でコンソールに表示させたいです。
ですが、@submit.preventをつけても画面がリロードされてしまいます。
ソースコード
html
1<!DOCTYPE html> 2 3<head> 4 <meta charset="UTF-8"> 5 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 6 <title>vue practice</title> 7</head> 8<body> 9 10 <div id='container'> 11 <form @submit.prevent='clicked'> 12 <input type="text" v-model='text'> 13 <input type="submit" value="send"> 14 </form> 15 </div> 16 17 18 <script> 19 let app = new Vue({ 20 el: '#container', 21 data: { 22 text: '' 23 }, 24 methods: { 25 clicked: function(){ 26 console.log(this.text); 27 } 28 } 29 }) 30 </script> 31</body> 32</html>
自己解決
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。