jQuery 使用 vue.js 插入后按类获取元素答案

【问题标题】：jQuery get element by class after being inserted with vue.jsjQuery 使用 vue.js 插入后按类获取元素
【发布时间】：2020-11-07 10:02:08
【问题描述】：

如果您查看我的演示代码，您会看到一个名为 scrollToCurrentMonth() 的函数，它试图滚动到 listTemplate 中具有“当前”类的元素。我的问题是我无法获取此元素，因为它已通过 vue.js 插入到 dom 中。那么如何使用“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

【解决方案1】：

尝试使用mounted而不是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>

【讨论】：