砌体不是功能

Question

我正在尝试在我的应用程序中使用砌体。以下是我的组件模板。

<template>
    <div>
        <section class="section">
            <div class="container">
                <div class="row team">
                    <div class="col-md-4 col-sm-6 member" v-for="team in teamMembers">
                        <div class="team__item">
                            <div class="team__info">
                                <h4>{{team.name}}</h4>
                                <small>{{team.title}}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script src="https://unpkg.com/masonry-layout@4.1.1/dist/masonry.pkgd.min.js"></script>

<script>
    export default {
        data() {
            return {
                teamMembers: []
            }
        },
        mounted() {
            this.getTeamMembers();
        },
        methods : {
            getTeamMembers : function() {
                this.$http.get('teamMembers').then(response =>{
                    // console.log(response);
                    if(response.data.status=200) {
                        this.teamMembers = response.data.teamMembers;
                        this.$nextTick(function() {
                            var $container = $('.team');

                              $container.masonry({
                                columnWidth: '.member',
                                itemSelector: '.member'
                              }); 
                        })
                    }
                })
            }
        }
    }
</script>

每当呈现视图时，我都会收到以下错误。

TypeError: $container.masonry is not a function

你能告诉我我在这里做错了什么吗？

Answer 1

你可以通过this.$el获取vue组件DOM元素。因此，您可以执行以下操作：

$(this.$el.querySelector('.team')).masonry({
                            columnWidth: '.member',
                            itemSelector: '.member'
                          }); 

但请记住，只要您的组件不是 Fragment Instance，即它只有一个根 HTML 标记，这是有效的。

---

您需要将以下脚本行放入 index.html 中，以便正确加载。

<script src="https://unpkg.com/masonry-layout@4.1.1/dist/masonry.pkgd.min.js"></script>