jQuery получает элемент по классу после вставки с помощью vue.js

Question 1

Если вы заглянете внутрь моего демонстрационного кода, вы увидите функцию с именем scrollToCurrentMonth (), которая пытается перейти к элементу, который имеет «текущий» класс внутри listTemplate. Моя проблема в том, что я не могу получить этот элемент, поскольку он был вставлен в дом через vue.js. Итак, как мне получить этот элемент с классом current, чтобы я мог получить его верхнюю позицию для анимации прокрутки?

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>

javascript html jquery vue.js

0

Reece 17 Июл 2020 в 17:59

Answer

Попробуйте использовать смонтированный вместо created.

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(),
        };
    },
    mounted() {
        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>

1

epascarello 17 Июл 2020 в 15:07

Question 2

Попробуйте использовать смонтированный вместо created.

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(),
        };
    },
    mounted() {
        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>

1

epascarello 17 Июл 2020 в 15:07

jQuery получает элемент по классу после вставки с помощью vue.js

1 ответ

Похожие вопросы

Новые вопросы

javascript