Question

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

一切都像预期的那样有效，但我对于如何访问我通过道具传入的数据感到非常难过。没有出现在任何地方的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 %>

test.vue

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

<script>
  export default {
    data: function () {
      return {
          test: 'This will display',
      }
    }
  }
</script>

<style>
</style>

test_vue.js

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');
})

Answer 1

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

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

这将是relevant documentation。

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

将数据从Rails模板传递到Vue Instance

1 个答案: