【Vue.js】ラジオボタンで入力フォームを切り替える方法
2019-09-22
はじめに
この記事では、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>
<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>フォーム切り替え時に値を消去する方法
バリデーション等の関係で、フォームを切り替えたときに値を消去したい場合は
key="value"をinput の属性に追加してください。valueの値は1でもaでもなんでもいいのですが、区別したいフォーム同士で違うkeyの値を渡してください。
