RailsでDOMにデータを埋め込んでJSに渡す方法

備忘録です。 備忘録って便利な言葉だ。

ブログの最初に「備忘録」って書けば、何を書いても「まぁ、これ備忘録だから適当でいいか」って気持ちになれるのでおすすめです。

— 神速 (@sinsoku_listy) August 10, 2019

環境

rails 5.2.3

やりたいこと

インスタンス変数@usersをVue.jsでリスト表示したいので、 Rails→JSでこの変数を受け渡したい。 （「AjaxでAPIを呼び出す方法」ではない方法を理解したいので今回それは省略）

書き方

Rails

実際は業務のコードなので改変。

class UsersController < ApplicationController
  def index
    @users = User.all  
  end
end

# users/index.html.slim

#users(
    data-users: @users.to_json
)

# JavasScript
# ユースケースによってはconstの方がいいかもしれない
var list = document.getElementById('users');
var usersList = list.getAttribute("data-users");

参考記事

www.sitepoint.com