Question

我有一个页面，其中包含6个vue元素，其中一个具有他自己的独立文件，并且我在同一页面上加载了渲染部分，然后我们将其名称命名为 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
    }
  })
})

将我的渲染部分订单安装到页面时，在这里 index.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 文件看起来都像这样（我正在对vue数据使用 fetch ，只是为了检查数据是否在.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应该呈现的图表。有什么建议吗？（警告，可能是语法错误，请改正我的意思）

Answer 1

将int main() { std::function<foType> fo2 = std::bind(&foAndFo,std::placeholders::_1); //error }更改为import Vue from 'vue/dist/vue.esm';，然后放入

import Vue from 'vue/dist/vue.js';

在使用新的Vue方法之前，请立即加载。

在Rails中的Ruby中渲染多个Vue元素

1 个答案: