Vue.jsでのEnterキーの処理

Question 1

私は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関数をキャプチャできるように、少なくとも最初に関数が起動することを期待します。しかし、それは起こっていないようです。私は何が間違っているのですか？

Question 2

イベント修飾子

キーでのフォーム送信を防ぐために、vuejsのイベント修飾子を参照できenterます。

イベントハンドラーを呼び出すevent.preventDefault()か、event.stopPropagation()内部で行う必要があるのは非常に一般的です。

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

この問題に対処するために、Vueはのイベント修飾子を提供しますv-on。修飾子は、ドットで示されるディレクティブの後置であることを思い出してください。

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

ドキュメントに記載されているように、これは構文上の糖衣構文でe.preventDefault()あり、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';
    },
    noop () {
      // do nothing ?
    }
  }
})

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

<script src="https://unpkg.com/vue@2.2.4/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>

スニペットを展開

Question 3

vue 2ではv-on:keyup.enter、ドキュメントを確認して、Enterイベントをキャッチできます。

https://vuejs.org/v2/guide/events.html#Key-Modifiers

非常に簡単な例を残します。

var vm = new Vue({
  el: '#app',
  data: {msg: ''},
  methods: {
    onEnter: function() {
       this.msg = 'on enter event';
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <input v-on:keyup.enter="onEnter" />
  <h1>{{ msg }}</h1>
</div>

スニペットを展開

幸運を

Question 4

最後の行の前の「}」を忘れています（「メソッド{...」を閉じるため）。

このコードは機能します：

Vue.config.keyCodes.atsign = 50;

new Vue({
  el: '#myApp',
  data: {
    emailAddress: '',
    log: ''
  },
  methods: {
  
    onEnterClick: function() {
    	alert('Enter was pressed');
    },
    
    onAtSignClick: function() {
    	alert('@ was pressed');
    },
    
    postEmailAddress: function() {
			this.log += '\n\nPosting';
    }
  }
})

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

<script src="https://vuejs.org/js/vue.min.js"></script>

<div id="myApp" style="padding:2rem; background-color:#fff;">

  <input type="text" v-model="emailAddress" v-on:keyup.enter="onEnterClick" v-on:keyup.atsign="onAtSignClick" />
  
  <button type="button" v-on:click="postEmailAddress" >Subscribe</button> 
  <br /><br />
  
  <textarea v-model="log" rows="4"></textarea>
</div>

スニペットを展開

Question 5

このイベントは私に役立ちます：

@keyup.enter.native="onEnter".

Question 6

入力イベントの処理には、次を使用できます。

@keyup.enter または
@keyup.13

13はenterのキーコードです。@キーイベントの場合、キーコードは50です。したがって、を使用できます@keyup.50。

例えば：

<input @keyup.50="atPress()" />