CODEWITHSUNDEEP
javascriptvue.js
mstdmstd
mstdmstd

Reputation: 3081

How in vuejs get querySelector element?

I want to use https://isotope.metafizzy.co in my @vue/cli 4.0.5 / Bootstrap 4.3 / jquery 3.4.1 app

I got codepen https://codepen.io/desandro/pen/nFrte example and try tu run it in my vue.js page. I encounetered some problems with rendering into vue, when I have row :

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.element-item',

I tried to make :

var itemElem_elem= document.querySelector('.grid')
console.log('itemElem_elem::')
console.log(itemElem_elem)

var $grid = itemElem_elem.isotope({    // eslint-disable-line
    itemSelector: '.element-item',

I expected that

$('.grid') == document.querySelector('.grid')

but looks like not, as in the console after itemElem_elem:: I see html code output and next error :

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in created hook: "TypeError: itemElem_elem.isotope is not a function"

Which way is correct ?

Thanks!

Upvotes: 0

Views: 1236

Answers (1)

nick
nick

Reputation: 126

according to https://github.com/metafizzy/isotope. maybe you should use something like the following:

// vanilla JS
var grid = document.querySelector('.grid');
var iso = new Isotope( grid, {
    // options...
    itemSelector: '.grid-item',
    masonry: {
        columnWidth: 200
    }
});


$('.grid') !== document.querySelector('.grid')

As you have seen the querySelector returns a DOM element where $() would return a jQuery Object that knows about the Isotope prototype

Upvotes: 1

Related Questions