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

有效！这是我的解决方案......不确定这是否是规范的方式，但它仍然有效。现在看起来非常痛苦......希望这会有助于其他人。这是完整的更新代码：

printInorder

private static void printInorder(Node root) {
    if (root == null)
        return;
    printInorder(root.left);
    System.out.print(root.data + " ");
    printInorder(root.right);
}

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

1 个答案: