こんにちは。今日はvue.jsで少し遊んでみた話をしたいと思います。


この画像のような、ラジオボタンの選択内容によって、次に入力させる内容を変える、みたいな動作を作る場面は結構あると思います。
例えば、「個人か法人か」を選ばせるラジオボタンで、「個人」を選択したら「屋号」、「法人」を選択したら「会社名」のボックスが出てくる、なんてとき。
そしてその辺りのことって、頼む側としてはちょっとした変更と思いがちですが、開発側としては地味に面倒な変更作業だったり……。
おそらくjQueryでやるのが一般的だと思うのですが、そうすると

  • HTML変更
  • jsファイル変更

となり、2つのファイルを修正する必要が出てきます。
でもvue.jsだとHTMLの変更だけで済んでしまいました。

ソース

index.html

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>サイトタイトル</title>
		<!-- vue.js 開発バージョン -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- vue.js 本番環境では上を消して以下を使うこと -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
	</head>
	<body>
		<div id="app">
			<input type="radio" id="one" value="1" v-model="picked">
			<label for="one">選択肢1</label>
			<br>
			<input type="radio" id="two" value="2" v-model="picked">
			<label for="two">選択肢2</label>
			<br>
			<div v-if="picked == 1">
			  <input placeholder="選択肢1についてのテキスト">
			</div>
			<div v-if="picked == 2">
				<input placeholder="選択肢2についてのテキスト">
			</div>
		</div>
		<script src="vue/sample.js"></script>
	</body>
</html>

sample.js

var vm = new Vue({
  el: '#app', //vue.jsで操作する対象の要素をid="app"にする
  data: {
    picked: 1 //id="app"内のラジオボタンの初期値
  },
})

解説

まずラジオボタンを生成するタグに注目。 

<input type="radio" id="one" value="1" v-model="picked">
<label for="one">選択肢1</label>

<input type="radio" id="two" value="2" v-model="picked">
<label for="two">選択肢2</label>

選択肢1、選択肢2ともに「v-model=”picked”」というプロパティを持っています。
これはsample.jsの「picked」の値と連動することを示していて、
画面ロード時は、sample.jsに記載しているpickedの値がラジオボタンの初期値となり、
ラジオボタンの選択がなされたときは、pickedの値をvalue値に置き換える役割を果たします。

次にラジオボタンの選択内容で表示するテキスト入力欄が変わる部分について。

<div v-if="picked == 1">
	<input placeholder="選択肢1についてのテキスト">
</div>

<div v-if="picked == 2">
	<input placeholder="選択肢2についてのテキスト">
</div>

どちらのinputタグもdivタグで囲われて、そのdivタグにはif文のようなものが書いてあります。
これはsample.jsのpickedの値（つまりラジオボタンの選択肢）を元に、要素を描画するかどうかを決める役割を果たします。
選択肢1が選ばれていれば、pickedの値は1なので、「v-if=”picked == 1″」の内容が表示されます。
またこの場合、sample.jsでラジオボタンの初期値は1と決めているので、画面ロード時は「選択肢1についてのテキスト」が表示されることになります。
そしてこのv-ifを使う方法では、v-ifの条件に合致しなかった方のdiv要素は、要素丸ごとページに存在しないことになります。
よくある、cssのdisplay:none;で見えなくすること（デベロッパーツールでcssを書き換えれば見える状態）とは違うということです。

↓選択肢1を選択しているときにデベロッパーツールで確認すると、こうなっています。

まとめ

というわけでvue.js、今回のような場合についてはjQueryと比べてお手軽に選択肢を増減させられることがわかりました。
単に選択肢が増えるだけなら、jsファイルには一切手を加える必要がありません。
ラジオボタンと、v-if=”picked == 3″のdivタグを増やせばいいだけですものね。
共同編集者がいる時は、vue.js使っていいもんか要確認だと思いますが、これくらいの処理なら気軽に使えそうでいいですね！
本格的なアプリケーションを作るところまで行くには大変そうですが、少しずつできることを増やしていこうと思います。

The following two tabs change content below.

金子風月

犬と歯車がついたものと跨り移動系スポーツ（馬・自転車）が好きな駆け出しweb系エンジニア。 2018年2月より、株式会社凛の皆様のおかげで憧れのweb系エンジニアになることができました。