8/28 作業ログ 望月 axios&Vue.jsでJSONデータをレンダリング

[mochi5o]

• 最終的にはかっしーさんのサンプルコードがベースですm( )m https://codesandbox.io/embed/example-vue-and-axios-20vrx

  調査の参考サイト

• CDN版Vue.js + axios でさくっとAjaxしてみる
• Vue.jsからaxiosで適当なjsonデータを取得して表示する
• axiosでJSONを取得する[Vue.js]
• 【Vue.js】axiosを使って取得したデータをバインドして描画する

だいたいみんな同じ書き方。consoleに出すところまでは結構すぐできたけど、レンダリングさせるための書き方がよく分かっていなくて時間がかかった。でも一度分かると、Vueの書き方はjQueryより断然早い。すごい。

aタグの属性にデータをバインディングする方法

aタグにhref属性つけるときの書き方がなかなか分からずググった href=""のなかに、url文字列/touring_routes/とjsonから取得したデータv.idを繋げていれたいが、{{}} の書き方が使えなかった リファレンス Vue.jsメモ：属性、ループ内呼び出し、など

• 実際のコード <a v-bind:href="'/touring_routes/' + v.id"></a>

自作のjsのファイルを読み込む方法

今回はindex.html.erbの下にscriptタグ直書きしましたので今後ファイルまとめる時とかの参考に

• assets/javascriptsの下に作成したファイルを配置

• 読み込ませたいerbファイル内でinclude_tagを使って読み込む

  <!-- routes.jsを読み込みたい場合 -->
  <%= javascript_include_tag "routes" %>

• ここで画面を表示するとこんな感じでエラーが出る

• エラーの指示に従って、config/initializers/assets.rbに下記を追記→サーバーを再起動でOK Rails.application.config.assets.precompile += %w( routes.js )s

• 参考サイト https://kenzooooo.com/programming/howtoread-jsfile

【ちょっとしたトラブル】DBに日本語が登録できなかったときやったこと

• 動作確認中に日本語が登録できないことに気づいたのでやったことまとめ

  # mysql -u root -p
  mysql> status
  
  mysql  Ver 14.14 Distrib 5.7.21, for Linux (x86_64) using  EditLine wrapper
  ~~
  Connection:       Localhost via UNIX socket
  Server characterset:  latin1    // ->utf8じゃないとだめ
  Db     characterset:  latin1    // ->utf8じゃないとだめ
  Client characterset:  utf8
  Conn.  characterset:  utf8
  UNIX socket:      /var/lib/mysql/mysql.sock
  Uptime:           1 hour 32 min 51 sec
  ~~

• /etc/my.cnfの中に追記

  
  [client]
  default-character-set=utf8

[mysql] default-character-set=utf8

[mysqldump] default-character-set=utf8

[mysqld] character-set-server=utf8

- サーバー止めてdb初期化
`rake db:reset`

- 参考サイト
https://qiita.com/EigenPort_M/items/46bd1bf386eb56eba97e
https://qiita.com/KawabataLemon/items/0edff5bd9b61368bedae
https://qiita.com/SonoT/items/12b21e24b83e56a61bec