[Vue warn]: Cannot find element: #video_list

[Davidzhu001]

something need to click twice for the rails link in order to show content

import Vue from 'vue/dist/vue.esm'
import Videos from './videos/videos.vue'
import TurbolinksAdapter from 'vue-turbolinks';
document.addEventListener('turbolinks:load', () => {
  var vueapp = new Vue({
    el: "#video_list",
    template: '<Videos/>',
    mixins: [TurbolinksAdapter],
    components: { Videos }
  });

});

[excid3]

@Davidzhu001 Check out this in the Readme: https://github.com/jeffreyguenther/vue-turbolinks#running-vue-only-on-specific-pages

If you have a page that doesn't include the element, you don't want to initialize the Vue app on that page.

[Davidzhu001]

@excid3 thanks for your reply.

I found a problem of using this gem.

import Vue from 'vue/dist/vue.esm'
import Downloads from './components/downloads.vue'
import TurbolinksAdapter from 'vue-turbolinks';

document.addEventListener('turbolinks:load', () => {
  var element = document.getElementById("downloads")
  if (element != null) {
  var downloads_vue = new Vue({
    el: element,
    template: '<Downloads/>',
    mixins: [TurbolinksAdapter],
    components: { Downloads }
  });
  } 
  else {
    console.log('not found element')
  }
      console.log('event touched')

});
---
<div id="downloads">

</div>
<%= javascript_pack_tag 'downloads' %>

[Davidzhu001]

the code <%= javascript_pack_tag 'downloads' %> will called after turbolinks:loaded.

[excid3]

@Davidzhu001 I don't quite understand what your issue is. Can you explain it some more?

[jeffreyguenther]

@Davidzhu001 are you still looking for assistance or can this issue be closed?

[jeffreyguenther]

Closing b/c issue is stale.