将数据从 Rails 视图传递到 webpacker 中的 VueJS 组件

Question

我正在尝试使用 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>
  <div>
    <h3>Hello {{ username }}</h3>
  </div>
</template>

<script>
export default {
  props: ['username'],
  data () {
    return {
      username: ""
    }
  }
}
</script>

到目前为止，我已经为此花费了几个小时，但我的尝试都没有成功。我尝试将数据作为道具传递给组件： props: ['username']，用

安装组件

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

...但这也不起作用

更新： 我在组件中缺少props: ['username'] 并相应地更新了上面的代码，尽管这似乎没有什么不同。还是没有运气！

Answer 1

它有效！这是我的解决方案......不确定这是否是规范的方法，但它仍然有效。现在看起来很痛苦……希望这对其他人有帮助。这是整个更新的代码：

# 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 './components/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"/>',
    components: { UserCard }
  })
})

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

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