【Vue.js】ラジオボタンで入力フォームを切り替える方法

Vue.js

2019.09.22

はじめに
1. フォーム切り替えの際、値の消去なし
2. フォーム切り替えの際、値の消去あり
フォーム切り替え時に値を消去する方法
1. 関連記事はこちら

はじめに

この記事では、Vue.jsのラジオボタンを使って入力フォームを切り替える方法を紹介します。

また、フォームを切り替えた際、フォーム内の値を消去する方法も紹介します。

動作環境

Vue.js 2.6

フォーム切り替えの際、値の消去なし

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Practice</title>
</head>
<body>
    
    <div id="app">
        <form>
            <label for="credit">クレジット</label>
            <input type="radio" id="credit" name="pay" value="credit" v-model="pay">
            <label for="bank">銀行</label>
            <input type="radio" id="bank" name="pay" value="bank" v-model="pay">
            <hr>
            <div v-if="pay === 'credit'">
                カード番号：<input type="text"/>
            </div>
            <div v-else-if="pay === 'bank'">
                口座番号：<input type="text"/>
            </div>

        </form>
        <br>
    </div>

    <!-- Vue.jsの読み込み -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        let app = new Vue({
            el:'#app',
            data:{
                pay:'credit',
            }
        });
    </script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Practice</title>

</head>

<body>

<form>

<label for="credit">クレジット</label>

<hr>

カード番号：<input type="text"/>

</div>

口座番号：<input type="text"/>

</div>

</form>

<br>

</div>

let app = new Vue({

el:'#app',

data:{

pay:'credit',

}

});

</script>

</body>

</html>

フォーム切り替えの際、値の消去あり

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Practice</title>
</head>
<body>
    
    <div id="app">
        <form>
            <label for="credit">クレジット</label>
            <input type="radio" id="credit" name="pay" value="credit" v-model="pay">
            <label for="bank">銀行</label>
            <input type="radio" id="bank" name="pay" value="bank" v-model="pay">
            <hr>
            <div v-if="pay === 'credit'">
                カード番号：<input type="text" key="credit"/>
            </div>
            <div v-else-if="pay === 'bank'">
                口座番号：<input type="text" key="bank"/>
            </div>

        </form>
        <br>
    </div>

    <!-- Vue.jsの読み込み -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        let app = new Vue({
            el:'#app',
            data:{
                pay:'credit',
            }
        });
    </script>

</body>
</html>