[解決済み] Vue.jsにおけるEnterキーの扱い

質問

Vue.jsを勉強しています。私のVueでは、テキストフィールドとボタンがあります。デフォルトでは、このボタンは、誰かがキーボードのEnterキーを押したときにフォームを送信します。誰かがテキストフィールドに入力しているとき、私は押された各キーをキャプチャしたいと思います。キーが「@」記号の場合は、何か特別な処理を行いたいと思います。Enter" "キーが押された場合も、何か特別な処理をしたい。後者の方が難しいですね。現在、私は次のような フィドル を作成していますが、これにはこのコードが含まれています。

new Vue({
  el: '#myApp',
  data: {
    emailAddress: '',
    log: ''
  },
  methods: {
    validateEmailAddress: function(e) {
      if (e.keyCode === 13) {
        alert('Enter was pressed');
      } else if (e.keyCode === 50) {
        alert('@ was pressed');
      }      
      this.log += e.key;
    },

    postEmailAddress: function() {
      this.log += '\n\nPosting';
    }
});

私の例では、フォームを送信せずに "Enter" キーを押すことができないようです。しかし、私は validateEmailAddress 関数が少なくとも最初に起動し、それをキャプチャできることを期待します。しかし、それは起こっていないようです。私は何を間違えているのでしょうか？

どのように解決するのですか？

イベントモディファイア

参照できるのは イベントモディファイア でのフォーム送信を防ぐために、vuejs の enter のキーになります。

を呼び出すことは、非常に一般的なニーズです。 event.preventDefault() または event.stopPropagation() をイベントハンドラ内で使用します。

メソッドの内部でこれを簡単に行うことができますが、メソッドが DOM イベントの詳細を処理するのではなく、純粋にデータロジックについてであれば、よりよいでしょう。

この問題に対処するために、Vueはイベントモディファイアを v-on . モディファイアはドットで示される指示語の接頭辞であることを思い出してください。

<form v-on:submit.prevent="<method>">
  ...
</form>

ドキュメントにあるように、これは e.preventDefault() の構文上の糖分であり、エンターキーを押したときに不要なフォーム送信を停止させます。

ここで は動くバイオリンです。

new Vue({
  el: '#myApp',
  data: {
    emailAddress: '',
    log: ''
  },
  methods: {
    validateEmailAddress: function(e) {
      if (e.keyCode === 13) {
        alert('Enter was pressed');
      } else if (e.keyCode === 50) {
        alert('@ was pressed');
      }      
      this.log += e.key;
    },
    
    postEmailAddress: function() {
			this.log += '\n\nPosting';
    },
    noop () {
      // do nothing ?
    }
  }
})

html, body, #editor {
  margin: 0;
  height: 100%;
  color: #333;
}

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="myApp" style="padding:2rem; background-color:#fff;">
<form v-on:submit.prevent="noop">
  <input type="text" v-model="emailAddress" v-on:keyup="validateEmailAddress" />
  <button type="button" v-on:click="postEmailAddress" >Subscribe</button> 
  <br /><br />
  
  <textarea v-model="log" rows="4"></textarea>  
</form>
</div>