1

I'm using jQuery tabSlideOut https://github.com/hawk-ip/jquery.tabSlideOut.js
it works fine but on the pages where I use vueJs components I get $(...).tabSlideOut is not a function.
I know that using jQuery within vueJs is not recommended and this is not the case so I didn't undestand why this doesn't work.

<script src="assets/js/jquery.tabSlideOut.js"></script>
<script src="assets/js/tabSlideOut.js"></script>

$(document).ready(function() {
var left = $('#left').tabSlideOut({
  tabLocation: 'left',
  clickScreenToClose: false,
  offset: '40px',
  offsetReverse: true, // offset from bottom, not top
  // handlers: enable and disable buttons when sliding open or closed
  onOpen: function(){
      $('#open').prop('disabled',true);
      $('#close').prop('disabled',false);
  },
  onClose: function(){
      $('#open').prop('disabled',false);
      $('#close').prop('disabled',true);
  }      
});
$('#top').tabSlideOut({
  tabLocation: 'right',
  action: 'hover',
  handleOffsetReverse: true,
  offsetReverse: true,
  onLoadSlideOut: true
});
});

<script src="js/app.js" charset="utf-8"></script>

Edit: Solved by including the jQuery plugin after the Vue is created, that by adding this in the created method of the Vue. 

    created(){
        //...
        require('./jquery.tabSlideOut');
    }
selimbousbih
  • 131
  • 1
  • 5
  • Please include the code, using https://stackoverflow.com/help/mcve. – Halil Özgür Sep 20 '17 at 20:27
  • I'm using Laravel 5.4, I include the jQuery.tabSlideOut.js then i have $(document).ready(function() { var left = $('#left').tabSlideOut({ ...})}; the problem occurs when i include js/app.js for vueJs – selimbousbih Sep 20 '17 at 20:34
  • Please add relevant JS code to your question, you can use https://stackoverflow.com/editing-help for formatting. – Halil Özgür Sep 20 '17 at 20:39
  • I eddited my post, is that enough information ? – selimbousbih Sep 20 '17 at 20:52
  • Thanks, at this point I'd say people who know more about the subject could help better. Maybe also the related parts of the HTML. – Halil Özgür Sep 20 '17 at 23:01
  • I found that I had to create my Vue components first then apply my query stuff (usually in the mounted section) because creating the vue components removed most of the jquery applied event handlers. – Bindrid Sep 21 '17 at 01:34

0 Answers0