Question

嗨，我在webpacker中使用了turbolinks 5和vue js 当我转到链接时，turbolinks仅加载组件的某些内容，而其他组件则无法工作。当我返回并再次链接时会发生这种情况。

任何帮助。

这是我的vue js代码

import Vue from 'vue/dist/vue.esm';
import SilabusApp from 'components/silabus/app';
import VeeValidate from 'vee-validate';
import BootstrapVue from 'bootstrap-vue';
import 'bootstrap-vue/dist/bootstrap-vue.css';

import Autocomplete from 'v-autocomplete'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
import 'v-autocomplete/dist/v-autocomplete.css'

import TurbolinksAdapter from 'vue-turbolinks';

// Configuracion de validaciones en español
const VueValidationEs = require('vee-validate/dist/locale/es');
Vue.use(VeeValidate,{
    locale: 'es',
    dictionary: {
      es: VueValidationEs
    }
});

Vue.use(Autocomplete);
Vue.use(BootstrapVue);
Vue.use(TurbolinksAdapter);

document.addEventListener('turbolinks:load', () => {

var element= document.getElementById("silabus-app-view");
  if (element!=null) {
    var vueapp = new Vue({ el: element,
    components: {  'silabus-app-view': SilabusApp}  });
  }
});

在我的html.erb

中

<div id="silabus-app-view">

  <silabus-app-view 
    :read_only_silabus = false 
    id_syllabus_program="<%= params[:id] %>" 
    ref="first"
    url_to_be_approve="<%= send_to_approve_syllabus_path(params[:id]) %>"
    state_syllabus="<%= @syllabus_program.state %>" >
  </silabus-app-view>

</div>

<%= stylesheet_pack_tag 'silabus/app' %>
<%= javascript_pack_tag 'silabus/app' %>

如果我禁用链接涡轮链接，则此组件会加载正确性，但会刷新所有页面。

Turbolinks空载组件

0 个答案: