将数据从Rails视图传递到webpacker中的VueJS组件 [英] Pass data from Rails views to VueJS components in webpacker

问题描述

我正在尝试使用Rails 5.1的新webpacker gem以及VueJS，但无法获取我的erb视图以将数据传递给VueJS组件......

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 %>

我的javascript：

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>

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

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

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

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:

# 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>

这篇关于将数据从Rails视图传递到webpacker中的VueJS组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！