小编coi*_*epe的帖子

我试图摆弄Rails 5.1的新webpacker gem以及VueJS,但无法获取我的erb视图以将数据传递给VueJS组件......

假设我有一个用户显示视图

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

而我的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> …