Vue.jsでFormの中の要素に対するメソッドよりも、Formに対するメソッドの方が優先される

2020年6月1日

今回はVue.jsでFormの中の要素に対するメソッドよりも、Formに対するメソッドの方が優先されるということについてご紹介いたします。

内容について文章でお伝えするのが難しいかもしれませんがサンプルコードを交えてご説明いたします。

Vue.jsでFormの中の要素に対するメソッドよりも、Formに対するメソッドの方が優先される

サンプルを提示した方が話が早いと思うので、まずサンプルをご紹介したいと思います。
まずうまくいかない例です。

Formの中に次のテキストボックスのインプットがあるとします。
(メソッドは私が以前書いた次の記事から引用しています。Vue.jsで@keyupを使った半角英数字や数字の入力制限)

HTML側が下記のコード

<form action="" id="test_form" method="post" >
    <input class="testkey" type="text" name="testkey" id="testkey" v-model="testkey" @keyup="keyUpNumberRestriction"/>
</form>

</form>

Vue.js側が下記のコードです。

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')
        }
    }
})

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と変わりません。)

<form action="" id="test_form" method="post" >
    <input class="testkey" type="text" name="testkey" id="testkey" v-model="testkey" @keyup="keyUpNumberRestriction"/>
</form>

</form>

Vue.js側が下記のコードになります。

// 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,'');
            }
        },
    }
})