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 ponents...

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 './ponents/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/>',
    ponents: { UserCard },
    data () {
      return { username }
    }
  })


// app/javascript/user-card/ponents/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 ponent as a prop: props: ['username'], mounting the ponent with

Vueponent(UserCard, {
  props: ['username']
  // or
  data () {
    return { username: username }
  }
})

... but that didn't work either

Update: I was missing props: ['username'] in the ponent and updated the code above accordingly, though that doesn't seem to have made a different. Still no luck!

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 ponents...

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 './ponents/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/>',
    ponents: { UserCard },
    data () {
      return { username }
    }
  })


// app/javascript/user-card/ponents/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 ponent as a prop: props: ['username'], mounting the ponent with

Vue.ponent(UserCard, {
  props: ['username']
  // or
  data () {
    return { username: username }
  }
})

... but that didn't work either

Update: I was missing props: ['username'] in the ponent and updated the code above accordingly, though that doesn't seem to have made a different. Still no luck!

• javascript
• ruby-on-rails
• vue.js
• ruby-on-rails-5.1
• webpacker

1 Answer 1

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:

# view/users/show.html.erb
<%= javascript_pack_tag "user-card" %>
<%= content_tag :div,
  nil,
  id: "user-card",
  data: { username: @user.name }
 %>

// 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 './ponents/UserCard'

document.addEventListener('DOMContentLoaded', () => {
  let element = document.getElementById("user-card")
  let username = element.dataset.username

  const app = new Vue({
    el: element,
    data: { username: username },
    template: '<UserCard :username="username"/>',
    ponents: { UserCard }
  })
})

// app/javascript/user-card/ponents/UserCard.vue
<template>
  <div>
    <h3>Hello {{ username }}</h3>
  </div>
</template>

<script>
export default {
  props: ['username']
}
</script>