Передача данных между представлением 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>

Просмотр рельсов:

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

Это кажется очень простой вещью, как я прочитал в этом вопросе о переполнении стека: Передача данных из представлений Rails компонентам VueJS в webpacker , но я постоянно получаю, что «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);
});