Railsからvueへpropsへデータの受け渡し方法
下記の例では、Rails側のテンプレートで items/show.html.slim の id="recommend-category" の dataに code と item-group-codeを設定しています。(ケバブケースが良い様です)
items/show.html.slim
#recommend-category(data-code="#{@item_group.code}" data-item-group-code="#{@item_group.code}")
= javascript_pack_tag 'item'
recommend-category に vueを反映しつつ、propsにdataセットを渡しています。 app/javascript/packs/item.js
import RecommendCategories from './components/category/RecommendCategories'
document.addEventListener('DOMContentLoaded', () => {
new Vue({
el: '#recommend-category',
render: h => h(RecommendCategories, { props: document.getElementById("recommend-category").dataset})
})
})
vueのコンポーネント側では、propsで受け取ります。
app/javascript/packs/components/category/RecommendCategories.vue
`export default {
props: ['itemGroupCode', 'code'],
}
