2018-12-03から1日間の記事一覧

Rails + Nokogiri + Vue.jsでスクレイピング & SPAを作った

Rails + Nokogiri + Vue.jsを使ってシングルページアプリケーションを作りました。 史上5頭目の三冠牝馬アーモンドアイの競走成績表を作成してチェックできるアプリケーションです。 ネット競馬.comをスクレイピングしたデータをもとにRailsのモデルオブジェ…

json.jbuilderでオブジェクトの配列を渡す、他

v-forディレクティブのなかでv-on:click="メソッド()"の引数に配列の要素を渡す 特別な書き方は必要なく、そのまま書ける。

モーダルウィンドウを使うときのHTML構成

モーダル表示中はモーダル外を暗くしてその暗い部分をクリックしたときにモーダルが閉じるようにする。 やり方はこんな感じ イメージ

Railsの処理が失敗した時に失敗JSONを返すことでVue.jsの処理を分岐させる

非遷移でVue.jsとRailsがやり取りするにあたって、失敗時の処理を分岐させる方法です。 以下のような形で実装しました。 ①Rails内の処理が成功したか失敗したかを、それぞれ別のJSONを返すことで判定 ②Vue.jsでは、返ってきたJSONによって成否を判断して処理…

データ削除後の表示を非遷移で更新する

シングルページアプリケーションなのでデータの削除時も非遷移で表示が変更されなければいけません。 しかし、Vueのメソッド内で ・axiosでdeleteリクエストを送信 ・データ取得メソッドを実行 とそのまま記述しても ①axiosでdeleteリクエストを送信 ②データ…

axios.POSTした配列オブジェクトをRailsのモデルオブジェクトとして保存する

1つのレースオブジェクト { name: 桜花賞, location: 阪神, weather: 晴 } 複数のレコードオブジェクト(配列) [ { name: 馬A, jockey: 騎手A }, { name: 馬B, jockey: 騎手B }, ...... ] これらを同時にVue.jsから投げ、Railsで取得してそれぞれのモデル…