Vue.js
webpack.config.jsの書き方が分かってとりあえずテストが動いた！ webpack.config.js const ExtractTextPlugin = require("extract-text-webpack-plugin") const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { mode: 'development…
Vue.jsのテストもやらねばと思って色々やってみたがなかなか進まない。 test-utilsってVue.jsの公式テストライブラリを使ってみたんだけど、 WEBPACK Failed to compile with 1 error(s) Error in ./app/javascript/router-view/zip-code.vue?vue&type=style…
Promiseとは 非同期処理を抽象化したオブジェクトとそれを操作する仕組みのことを指す。 Javascriptの概念ではなく、プログラミング言語におけるデザインの一種。 JSにおける非同期処理にはコールバック関数を利用するものもあるが、Promiseは非同期に対して…
Vuexストアのモジュール分割を試したのでまとめる。
ユーザ情報登録ページで、 郵便番号入力→「住所を取得」ボタンクリック→住所欄に取得したデータを表示 を実装しました。
v-bind:classにオブジェクトを渡すことで、クラスを動的に切り替えることが可能です。 <div v-bind:class="{ active : loggedIn }"> <p>投稿する</P> </div> 渡すオブジェクトを算出プロパティとして作成すると、より複雑な処理が可能になります。 <div v-bind:class="classObject"> <p>投稿する</P> </div> vueファイル data: { loggedIn: true, error: null }, co…
検索で来た方はこちらのページが綺麗にまとまっていて分かりやすいです。 pizzamanz.net
「プロジェクトの追加」をクリックすると入力画面が開くので入力してプロジェクト作成
アプリケーションの複雑な状態管理を実現してくれるVuexを導入します。 npm install vuex --save store.jsを作成します。
Railsプロジェクトの作成とVueのインストールは省略。 /app/views/layouts/application.html.erb <body> <div id="potatoSNS"> <%= yield %> </div> <%= javascript_pack_tag 'main' %> <%= stylesheet_pack_tag 'main' %> </body>
やりたかった事は ・Vue.jsの基本的な操作おさらい ・RailsはAPIのみに専念させる ・郵便番号から住所を取得するメソッド ・ユーザーに何かしらの数値を持たせて管理する
技術評論社から出ている『Vue.js入門 基礎から実践プリケーション開発まで』を手に入れた。 前回の競走成績ジェネレーターではRailsのプロジェクトの中でVue.jsを動かすという形で作ったけど、Vue.js主体でアプリケーションを作ることもできるのか？という疑…
Rails + Nokogiri + Vue.jsを使ってシングルページアプリケーションを作りました。 史上5頭目の三冠牝馬アーモンドアイの競走成績表を作成してチェックできるアプリケーションです。 ネット競馬.comをスクレイピングしたデータをもとにRailsのモデルオブジェ…
v-forディレクティブのなかでv-on:click="メソッド()"の引数に配列の要素を渡す 特別な書き方は必要なく、そのまま書ける。
非遷移でVue.jsとRailsがやり取りするにあたって、失敗時の処理を分岐させる方法です。 以下のような形で実装しました。 ①Rails内の処理が成功したか失敗したかを、それぞれ別のJSONを返すことで判定 ②Vue.jsでは、返ってきたJSONによって成否を判断して処理…
シングルページアプリケーションなのでデータの削除時も非遷移で表示が変更されなければいけません。 しかし、Vueのメソッド内で ・axiosでdeleteリクエストを送信 ・データ取得メソッドを実行 とそのまま記述しても ①axiosでdeleteリクエストを送信 ②データ…
１つのレースオブジェクト { name: 桜花賞, location: 阪神, weather: 晴 } 複数のレコードオブジェクト（配列） [ { name: 馬A, jockey: 騎手A }, { name: 馬B, jockey: 騎手B }, ...... ] これらを同時にVue.jsから投げ、Railsで取得してそれぞれのモデル…
