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

问题描述

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

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

# view/users/show.html.erb<%= javascript_pack_tag "用户卡" %><%= content_tag :div,id: "用户卡",数据: {用户名:@user.name}做%><%结束%>

还有我的 javascript:

//app/javascript/packs/user-card.js要求(用户卡")//app/javascript/user-card/index.js从 'vue/dist/vue.esm' 导入 Vue从 './components/UserCard' 导入 UserCarddocument.addEventListener('DOMContentLoaded', () => {let element = document.getElementById("user-card")让用户名 = element.dataset.username控制台日志(用户名)；//=>佩奇"const app = new Vue({el:元素，模板:'<用户卡/>',组件:{用户卡}，数据 () {返回{用户名}}})//app/javascript/user-card/components/UserCard.vue<模板><div><h3>你好{{用户名}}</h3>

<脚本>导出默认{道具:['用户名']，数据 () {返回 {用户名: ""}}}

到目前为止，我已经花了几个小时来解决这个问题，但我的尝试都没有成功.我试过将数据作为道具传递给组件:props: ['username']，用

挂载组件

Vue.component(UserCard, {道具:['用户名']//或者数据 () {返回{用户名:用户名}}})

...但这也没有用

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

解决方案

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

# view/users/show.html.erb<%= javascript_pack_tag "用户卡" %><%= content_tag :div,零，id: "用户卡",数据:{ 用户名:@user.name }％＞

//app/javascript/packs/user-card.js要求(用户卡")//app/javascript/user-card/index.js从 'vue/dist/vue.esm' 导入 Vue从 './components/UserCard' 导入 UserCarddocument.addEventListener('DOMContentLoaded', () => {let element = document.getElementById("user-card")让用户名 = element.dataset.usernameconst app = new Vue({el:元素，数据:{用户名:用户名}，模板:'<UserCard :username="username"/>',组件:{用户卡}})})//app/javascript/user-card/components/UserCard.vue<模板><div><h3>你好{{用户名}}</h3>

<脚本>导出默认{道具:['用户名']}

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:

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