У меня была одна страница с 6 vue elemens, у которой был свой отдельный файл, и я загружал на эту же страницу с частичным рендерингом, затем div с его именем, как мы можем видетьв моем коде.Проблема в том, что на производстве ничего не рендерится, я просто получаю пустой HTML-div со всеми классами, но ничего внутри, как они предпочитают смотреть.Я нашел несколько советов о том, что производственные детали запрашивают другой подход от VUE для работы, используя.
import Vue from 'vue'
и
const app = new Vue({
el: domElement,
render: h => h(RootComponent)
})
, но я не могу найти способ в моем проекте поставитьэти вещи работают.
Вот мой home.js , куда я импортирую файлы и затем использую их в качестве компонентов VUE:
import TurbolinksAdapter from 'vue-turbolinks';
import Vue from 'vue/dist/vue.esm';
import VCharts from 'v-charts';
import BootstrapVue from 'bootstrap-vue';
import { Modal, Button } from 'bootstrap-vue/es/components';
import IndicatorsContainer from '../../admin_area/home/indicators-container';
import IndicatorsItem from '../../admin_area/home/indicators-item';
import SalesContainer from '../../admin_area/home/graphic-sales-container';
import TestsContainer from '../../admin_area/home/tests-container';
import TopCoaches from '../../admin_area/home/top-coaches';
import TopRegions from '../../admin_area/home/top-regions';
Vue.config.ignoredElements = [
'trix-toolbar',
'trix-editor',
'action-text-attachment'
]
Vue.use(TurbolinksAdapter);
Vue.use(VCharts);
Vue.use(BootstrapVue);
Vue.use(Modal);
Vue.use(Button);
document.addEventListener('turbolinks:load', () => {
new Vue({
el: '#admin_area_home',
components: {
'indicators-container': IndicatorsContainer,
'indicators-item': IndicatorsItem,
'graphic-sales-container': SalesContainer,
'tests-container': TestsContainer,
'top-coaches': TopCoaches,
'top-regions': TopRegions
}
})
})
Вот мой индекс .html.haml когда я монтирую на странице порядок партиала рендеринга:
.d-block.mt-3
= render partial: 'shared/messages'
.d-block#admin_area_home
= render partial: 'admin_area/home/partials/indicators'
= render partial: 'admin_area/home/partials/sales'
= render partial: 'admin_area/home/partials/tests'
.col-12.my-4
.row
.col-6.pl-0
= render partial: 'admin_area/home/partials/top-coaches'
.col-6.pr-0
= render partial: 'admin_area/home/partials/top-regions'
= javascript_pack_tag 'admin_area/home', 'data-turbolinks-track': 'reload'
Каждый частичный выглядит следующим образом, где я передаю данные через реквизиты URL:
%top-coaches{:title => t('.title'), :year => t('.year'), :month => t('.month'), :url_coaches_year => admin_area_home_top_coaches_year_url, :url_coaches_month => admin_area_home_top_coaches_month_url}
И, наконец, каждый файл .vue выглядит следующим образом (я использую fetch для данных vue только для проверки правильности передачи данных в файлы .json.):
<template>
<fieldset>
<div class="c-indicators__legend d-flex justify-content-between">
<legend>{{ title }}</legend>
<select
id="filter"
name="filter"
class="form-control d-flex align-items-end col-4">
<option value="1" selected>{{ year }}</option>
<option value="2">{{ month }}</option>
</select>
</div>
<div class="c-indicators__card">
<div class="c-indicators__container">
<div id="admin_area" class="container">
<template>
<b-table striped hover :items="items" />
</template>
</div>
</div>
</div>
</fieldset>
</template>
<script>
export default{
props: [
'title',
'year',
'month',
'url_regions_year',
'url_regions_month'
],
data() {
return {
items: [
fetch(this.url_regions_year),
fetch(this.url_regions_month),
]
}
}
}
</script>
На странице загружаются все элементы div, выбранные выпадающие списки и любые другие элементы HTML, которые я вставил, но не диаграммы и таблицы, которые vue должен отображать.Любой совет?(предупреждение, возможна неправильная грамматика, не смог исправить меня)