rails6のモデルからVue.jsにデータを渡す方法

Question

前提・実現したいこと

現在 Ruby on rails 6 に少しずつVue.jsを導入しています。
railsのモデルから受け取った配列になっているデータをVue.jsに送りたいのですが、
そのやり方がいまいち分からず躓いています。

試してみたこと

places_controller.rb

  def show
    @place = Place.find(params[:id])
  end

show.html.erb　（placeテーブルにはnameとdescriptionのカラムがあります）

<div
  class="js-places-show"
  data-name="<%= @place.name %>"
  data-description="<%= @place.description %>"
></div>

app/javascript/packs/places.js

import Vue from 'vue'
import PlacesShow from '../components/places/PlacesShow.vue'

document.addEventListener('DOMContentLoaded', () => {
  const el = document.querySelector('.js-places-show')

  if (el == null) {
    return
  }

  const { name, description } = el.dataset

  const props = {
    name: name,
    description: description,
    editPlacePath: editPlacePath,
  }

  new Vue({
    el: el,
    render: h => h(PlacesShow, { props })
  }).$mount()
})

app/javascript/components/places/PlacesShow.vue

<template>

<div class="place-show">
  <table class="table table-borderless">
    <tr> 
      <th>場所名</th> 
      <th> {{ name }} </th> 
    </tr>
    <tr> 
      <th>概要</th> 
      <th> {{ description }} </th>
    </tr>
  </table>
</div>

</template>

<script>
export default {
  name: 'PlacesShow',
  props: {
    name: {
      type: String,
      required: true
    },
    description: {
      type: String,
      required: true
    }
  }
}
</script>

<style scoped>
</style>

例えばshowアクションの場合はモデルから取ってくるレコードが1つなのでこのようにしてVue.jsのdataオプションに渡すことができて上手くいきました。

ですが、indexアクションのようにレコードが複数あり配列になっているものはどのような形にしてdataにすればいいのかが全く分からない状態で詰んでしまっています。

やりたいこと

places_controller.rb

  def index
    @places = Place.all
  end 

index.html.erb　

↓ここの書き方をどのようにすればいいのでしょうか。showアクションだったら@place.nameでそのまま入れ子になっているnameを渡せたのですが。。。
<div
  class="js-places-index"
  data-places="<%= @places %>"
></div>

indexアクションの場合はレコードが1つではなく、Place.allとしているので複数のレコードが入っている状態です。
この状態で上記のようにdata属性に入れVue.jsに渡してV-forでplace in placesみたいな感じでplace.nameなどを表示したいのですが、
どのようにしてVue.jsに値を渡せばいいのでしょうか。
またその際のVueの書き方などもご教授いただけたら嬉しいです。

当方初心者でして、質問も初めてで至らない部分が多々あると思います。
質問の仕方に足りない部分などありましたら容赦無くご指摘いただければ幸いです。
よろしくお願い致します。

引用

書き方はこちらの記事を参考にさせていただきました

補足情報（FW/ツールのバージョンなど）

rails6
ruby2.6
Vue.js

Answer 1

1. JSON 化して渡す

index.html.erb

<div
  class="js-places-index"
  data-places_json="<%= @places.to_json %>"
></div>

app/javascript/packs/places.js

  const { places_json } = el.dataset
  const places = JSON.parse(places_json)

1. window オブジェクトを介する

index.html.erb

<script>
  window.places=<%= @places.to_json.html_safe %>;
</script>

app/javascript/packs/places.js

  const places = window.places

Comments

[momokan928]

ありがとうございます！！