VueJSフォーム対入力イベント

Question

フォームがあり、ユーザーがテキスト入力内でEnterキーを押すと、送信イベントをキャッチしようとしています。

これはうまく動作しますが、ボタンのクリックをキャッチしてデフォルトの動作を妨げようとするまではうまくいきます。

ボタンのクリックと入力キーの入力を別々に処理できるようにしたいのですが、ボタンがフォームのsubmit.preventメソッドをオーバーライドしています。

は、以下の例を参照してください最初のテキストフィールドやボタン・トリガー「のイベント」が、2番目のフォームは、ボタンのイベントがありますが、それはフォーム送信オーバーライドしています。

I「は、2つのイベント」 が、「ダブル」

はバブルアップイベントとは何かですか？にタイトルを設定するためのボタンにタイトルを設定するために入力してキーを入力したいですか

var myApp = new Vue({ 
 
\t 'el' : '#myApp', 
 
    'data': { 
 
    \t 'title' : 'potato' 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script> 
 
<div id="myApp"> 
 
    
 
    <h1> 
 
    {{title}} 
 
    </h1> 
 

 
    <form method="POST" @submit.prevent="title = 'one event'"> 
 
    <input type="text" /> 
 
    <button>One event</button> 
 
    </form> 
 
    
 
    <form method="POST" @submit.prevent="title = 'two events'"> 
 
    <input type="text" /> 
 
    <button @click.prevent="title = 'double'">Two events</button> 
 
    </form> 
 
</div>

Answer 1

（デフォルトは提出する）ボタンの種類を変更しないなぜあなたは、とにかく提出からフォームを防止しているので。

<button type="button" @click="title = 'double'">Two events</button> 

var myApp = new Vue({ 
 
\t 'el' : '#myApp', 
 
    'data': { 
 
    \t 'title' : 'potato' 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script> 
 
<div id="myApp"> 
 
    
 
    <h1> 
 
    {{title}} 
 
    </h1> 
 

 
    <form method="POST" @submit.prevent="title = 'one event'"> 
 
    <input type="text" /> 
 
    <button>One event</button> 
 
    </form> 
 
    
 
    <form method="POST" @submit.prevent="title = 'two events'"> 
 
    <input type="text" /> 
 
    <button type="button" @click.prevent="title = 'double'">Two events</button> 
 
    </form> 
 
</div>