Ruby on rails 将数据从Rails模板传递到Vue实例

我一直在尝试将数据从Rails视图传递到Vue组件，如前所述

一切正常，但如何访问通过道具传递的数据让我感到困惑。没有出现在Vue开发者工具的任何地方，我无法通过摆弄Vue对象/在Vue对象内部找到它

有人能给我指一下正确的方向吗。我对Vue相当熟悉，所以甚至都不知道要搜索什么：/

show.html.erb

<%= javascript_pack_tag 'test_vue' %>
<%= stylesheet_pack_tag 'test_vue' %>
<%= content_tag :div, id: "test", data: {
                          message: "this wont!",
                          name: "nor will this!" }.to_json do %>
<% end %>

---

看起来您需要做的只是声明组件中的属性：

<template>
  <div id="app">
    <p>{{test}}{{message}}{{name}}</p>
  </div>
</template>

<script>
  export default {
    props: ["message","name"],
    data: function () {
      return {
          test: 'This will display',
      }
    }
  }
</script>

<style>
</style>

{{test}{{message}{{name}}

导出默认值{
道具：[“消息”，“名称”]，
数据：函数（）{
返回{
测试：“这将显示”，
}
}
}

这将是最好的选择

子组件需要显式声明它期望的道具 使用道具选项接收

---

太棒了，谢谢。我通过在一个单独的元素中添加数据，然后使用

message:document.getElementById（'data'）.dataset.message将数据拉入Vue数据，成功地破解了它。当然，这需要一个额外的元素，所以这是更整洁的方式
import Vue from 'vue'
import Test from './test.vue'
document.addEventListener('DOMContentLoaded', () => {
  const node = document.getElementById('test')
  const props = JSON.parse(node.getAttribute('data'))
  new Vue({
      render: h => h(Test, { props })
  }).$mount('#test');
})

<template>
  <div id="app">
    <p>{{test}}{{message}}{{name}}</p>
  </div>
</template>

<script>
  export default {
    props: ["message","name"],
    data: function () {
      return {
          test: 'This will display',
      }
    }
  }
</script>

<style>
</style>