I'm trying to fiddle with Rails 5.1's new webpacker gem, along with VueJS, but can't get my erb views to pass data to VueJS components...
Let's say I have a user show view
# view/users/show.html.erb
<%= javascript_pack_tag "user-card" %>
<%= content_tag :div,
id: "user-card",
data: {
username: @user.name
} do %>
<% end %>
And my javascript:
// app/javascript/packs/user-card.js
require("user-card")
// app/javascript/user-card/index.js
import Vue from 'vue/dist/vue.esm'
import UserCard from './components/UserCard'
document.addEventListener('DOMContentLoaded', () => {
let element = document.getElementById("user-card")
let username = element.dataset.username
console.log(username); // => "pecpec"
const app = new Vue({
el: element,
template: '<UserCard/>',
components: { UserCard },
data () {
return { username }
}
})
// app/javascript/user-card/components/UserCard.vue
<template>
<div>
<h3>Hello {{ username }}</h3>
</div>
</template>
<script>
export default {
props: ['username'],
data () {
return {
username: ""
}
}
}
</script>
I've been spending a few hours over this, by now, but none of my attempts have proven successful. I've tried passing the data to the component as a prop:
props: ['username']
, mounting the component with
Vue.component(UserCard, {
props: ['username']
// or
data () {
return { username: username }
}
})
... but that didn't work either
Update:
I was missing props: ['username']
in the component and updated the code above accordingly, though that doesn't seem to have made a different. Still no luck!
It works! Here's my solution... Not sure if it's the canonical way to do it, but it works nonetheless. It seems so painfully obvious now... Hope this will help others. Here's the whole updated code: