在Rails視圖和Vue.js之間傳遞數據

Question

我試圖將實例變量從Rails視圖簡單地傳遞給Vue.js組件。 我收到的錯誤消息是：

Property or method "epic_list" is not defined on the instance
but referenced during render.

這是我的代碼：

Vue.js：

import Vue from 'vue/dist/vue.esm';
import Roadmap from '../components/Roadmap.vue';
import Vuex from 'vuex';

Vue.use(Vuex);

Vue.component('roadmap', Roadmap);

document.addEventListener('DOMContentLoaded', () => {
  const element = document.getElementById('roadmap');
  const epics = element.dataset.epics
  console.log(epics);
  const app = new Vue({
    el: element,
    template: '<Roadmap :epic_list="epics"/>',
    components: { Roadmap }
  });
  console.log(app);
});

零件：

<template>
    <div id="roadmap">
        <div v-for="(epic, key) in epic_list">
          {{ epic.name }}
        </div>
    </div>
</template>

<script>
  export default {
    props: {
      epic_list: Object
    },
  }
</script>

Rails視圖：

div data-behavior='vue'
    = tag.div id: :roadmap, data: {epics: @project_epics.to_json}

這似乎是一件非常簡單的事情，正如我在這個堆棧溢出問題中讀到的那樣：將數據從Rails視圖傳遞到webpacker中的VueJS組件 ，但我不斷得到“ epic_list”的定義，即使每次它都能正確打印到控制台。

我究竟做錯了什么？

Answer 1

如果console.log(epics); 已經在控制台中打印了一個值，那么您可以嘗試以下方法嗎？

document.addEventListener('DOMContentLoaded', () => {
  const element = document.getElementById('roadmap');
  const epics = element.dataset.epics
  console.log(epics);
  const app = new Vue({
    el: element,
    template: '<Roadmap :epics_list="epics"/>',
    // added these lines:
    data: {
      epics: epics
    },
    components: { Roadmap }
  });
  console.log(app);
});