Jquery not working on Vue component used more than once-CodePudding

I created a custom datetime picker component on Vuejs and I am using jQuery to scroll the parent div to the number that is selected.

Since I am using this datetime picker component more than once in a page the jQuery is only effecting correctly the first component that is used on page!

This is the part of datetime picker component on vueJs:

<div class="date-section-holder">
  <div class="years">
    <p v-for="year in years" :class="{'active': selectedYear === year}" @click="selectedYear = year">{{ year }}</p>
  </div>
  <div class="months">
    <p v-for="month in months" :class="{'active': selectedMonth === month}" @click="selectedMonth = month">{{ month }}</p>
  </div>
  <div class="days">
    <p v-for="day in days" :class="{'active' : selectedDay === day}" @click="selectedDay = day"> {{ day }}</p>
  </div>
</div>

And this is the part of jQuery only for days:

$('.days p').on('click', function() {
  $($(this).parent()).scrollTop($($(this).parent()).scrollTop()   $(this).position().top - 150);
});

And also the part of jQuery to align all fields when opened, is only effecting the first component used:

$(document).ready(function() {
  $('.days').scrollTop($('.days').scrollTop()   $($('.days').find('.active')).position().top - 150);
  $('.years').scrollTop($('.years').scrollTop()   $($('.years').find('.active')).position().top - 150);
  $('.months').scrollTop($('.months').scrollTop()   $($('.months').find('.active')).position().top - 150);
})

CodePudding user response：

There is no need of using jQuery with Vue.js, it´s also not recommended, as you can manipulate the DOM through Vue.js and have no need for jQuery. You making it way to complex.

What you could and should use is something like PrimeVue. It offers a lot of components, also a calendar, where you can pick date and time. You can find more information about it in this documentation: PrimeVue | Calendar

CodePudding user response：

Well, I won't tell you not to use Vue and JQ together, because you already know that right :)

In order to use JQuery with Vue or any similar framework that is working and repainting the part of the dom constantly in form of components you will need to attach your event listeners to your static parent dom elements.

For example:

$('.days p').on('click', function() {
  $($(this).parent()).scrollTop($($(this).parent()).scrollTop()   
  $(this).position().top - 150);
});

Should be something like:

$(document).on('click', '.days p', function() {
  $($(this).parent()).scrollTop($($(this).parent()).scrollTop()   
  $(this).position().top - 150);
});

For the second part perhaps you gonna need to catch when new components are added

$(document).on('DOMNodeInserted', function(e) {

  var days = $(e.target).find('.days');
  var years= $(e.target).find('.years');
  var months= $(e.target).find('.months');

  if ( days .length ) {
    days.scrollTop(days.scrollTop()   $(days.find('.active')).position().top - 150);
  }
  if ( years.length ) {
    years.scrollTop(years.scrollTop()   $(years.find('.active')).position().top - 150);
  }
  if ( months.length ) {
    months.scrollTop(months.scrollTop()   $(months.find('.active')).position().top - 150);
  }
});