Masonry is not a function - vue-component

Question

I am trying to use masonry in my application. Following is my component template.
<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>
I get the following error whenever the view is getting rendered.
TypeError: $container.masonry is not a function
Can you please let me know what I am doing wrong here ?

Answer 1

You can get vue component DOM element by this.$el. So you can do the following:
$(this.$el.querySelector('.team')).masonry({
columnWidth: '.member',
itemSelector: '.member'
});
But remember this is valid as long as your component is not a Fragment Instance i.e. it has a single root HTML tag.
You many need to put following script line in index.html, so that it loads properly.
<script src="https://unpkg.com/masonry-layout#4.1.1/dist/masonry.pkgd.min.js"></script>