こんにちは、中村です。
今日はvue.jsを使って簡単なレコメンドを行うコンテンツを作ってみました。
概要
質問の答えに対して、おすすめしたい情報を表示します。
今回はシンプルに質問は2つ用意しました。
2つの答えの組み合わせにより、表示結果が変わります。
一つ目の質問では2択、2番目は3択なので、結果は6通りあります。
使った機能
表示の制御にはv-ifとv-clickを、結果になる情報はオブジェクトで用意しました。
デモとソースコード
See the Pen vue.jsでレコメンドを作ってみた by Nakamura (@takayo-nakamura) on CodePen.
動作の説明
（1）表示を切り替える
質問1、質問2、結果の3つブロックを用意し、変数statusの値によって表示を切り替えます。
（2）回答した情報を代入する
選択肢のボタンをクリックすると、回答した内容が引数で渡されます。
質問1の回答は変数answer1に、質問2の回答はanswer2に入ります。
同時に変数statusの値を変更して表示を変えていきます。
（3）結果を表示する
結果用のオブジェクトplaceに、日本国内、国外に階層を分けて用意しています。
変数answer1とanswer2を使って、表示用の変数resultに該当する値を代入し、表示させます。
まとめ
質問の内容やパターンを増やしていくともっと精度の高いコンテンツになっていきます。
複雑にしたときにはもう少し工夫が必要になりそうですが、簡単な仕組みでも面白いですね。
今は外出できない状況ですがこの連休は調べ物をする時間にしようかなと思います。
落ち着いたら旅行にも行きたいので、気になる場所について下調べしたいです。
どこがいいかなぁと夢がふくらみます。
お知らせ
次週はGWでお休みのため、次回の更新は5月13日（水）となります。
