if you look inside my demo code you will see a function called scrollToCurrentMonth() this is attempting to scroll to the element which has the 'current' class inside the listTemplate. My issue is that I'm unable to get this element as it has been inserted into the dom through vue.js. So how do I get this element with the class 'current' so that I can get its top position for the scroll animation?
const listTemplate = '' +
'<div class="list_body">' +
'<div v-for="(month, index) in months" v-bind:class="[\'event_month\', {current : index === currentMonth}]">' +
'{{month}}' +
'</div>' +
'</div>';
Vue.component('events-list-view', {
template: listTemplate,
data() {
return {
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
currentMonth: new Date().getMonth(),
};
},
created() {
this.scrollToCurrentMonth();
},
methods: {
scrollToCurrentMonth() {
$('.list-wrap').animate({
scrollTop: $('.list-wrap .current').offset().top
}, 2000);
}
}
});
new Vue({ el: "#app" });.list-wrap {
max-height: 300px;
overflow-y: scroll;
}
.event_month{
height: 100px;
border: 1px solid;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="list-wrap">
<events-list-view />
</div>
</div>
