Vue.jsでFormの中の要素に対するメソッドよりも、Formに対するメソッドの方が優先される
今回はVue.jsでFormの中の要素に対するメソッドよりも、Formに対するメソッドの方が優先されるということについてご紹介いたします。
内容について文章でお伝えするのが難しいかもしれませんがサンプルコードを交えてご説明いたします。
Vue.jsでFormの中の要素に対するメソッドよりも、Formに対するメソッドの方が優先される
サンプルを提示した方が話が早いと思うので、まずサンプルをご紹介したいと思います。
まずうまくいかない例です。
Formの中に次のテキストボックスのインプットがあるとします。
(メソッドは私が以前書いた次の記事から引用しています。Vue.jsで@keyupを使った半角英数字や数字の入力制限)
HTML側が下記のコード
|
1 2 3 |
<form action="" id="test_form" method="post" > <input class="testkey" type="text" name="testkey" id="testkey" v-model="testkey" @keyup="keyUpNumberRestriction"/> </form> |
Vue.js側が下記のコードです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
var testKey = new Vue({ el:'.testkey', data:{ }, methods:{ keyUpHalfSizeRestriction: function() { tmp_value = this.testkey if(tmp_value){ this.testkey = tmp_value.replace(/[^0-9a-zA-Z]/g,''); } }, keyUpNumberRestriction: function() { tmp_value = this.testkey if(tmp_value){ this.testkey = tmp_value.replace(/[^0-9]/g,''); } }, } }) var testForm = new Vue({ el: '#test_form', data: { seen: true, }, methods:{ testFunction: function() { console.log('test message') } } }) |
一見コンソールでエラーも出ず、うまくいくように見えますが実はうまくいきません。
正しくはFormの中の要素に対するVueインスタンスの作成「new Vue{}」を消し、代わりにFormのmethods側に関数を定義する必要があります。
下記はうまくいく例です。
修正すると、
HTML側が下記のコード(以前のHTMLと変わりません。)
|
1 2 3 |
<form action="" id="test_form" method="post" > <input class="testkey" type="text" name="testkey" id="testkey" v-model="testkey" @keyup="keyUpNumberRestriction"/> </form> |
Vue.js側が下記のコードになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
// var testKey = new Vue({ // el:'.testkey', // data:{ // testkey: '', // }, // methods:{ // keyUpHalfSizeRestriction: function() { // tmp_value = this.testkey // if(tmp_value){ // this.testkey = tmp_value.replace(/[^0-9a-zA-Z]/g,''); // } // }, // keyUpNumberRestriction: function() { // tmp_value = this.testkey // if(tmp_value){ // this.testkey = tmp_value.replace(/[^0-9]/g,''); // } // }, // } // }) var testForm = new Vue({ el: '#test_form', data: { testkey: '', }, methods:{ testFunction: function() { console.log('test message') }, keyUpHalfSizeRestriction: function() { tmp_value = this.testkey if(tmp_value){ this.testkey = tmp_value.replace(/[^0-9a-zA-Z]/g,''); } }, keyUpNumberRestriction: function() { tmp_value = this.testkey if(tmp_value){ this.testkey = tmp_value.replace(/[^0-9]/g,''); } }, } }) |
これを実行するとうまくいきます。
終わりに
今回はVue.jsでFormの中の要素に対するメソッドよりも、Formに対するメソッドの方が優先されるということについてご紹介いたしました。