How in vuejs get querySelector element?

Question

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!

The problem here is that you are trying to use jQuery and Vue. In the isotope website, it also has a JS implementation with npm install. Try following that route. Please make a codepen/jsFiddle so that we can mess around — Sujil Maharjan
– Sujil Maharjan, Commented Oct 3, 2020 at 17:22
or let the existing library do the job for you: github.com/David-Desmaisons/Vue.Isotope — Sujil Maharjan
– Sujil Maharjan, Commented Oct 3, 2020 at 17:23
Look at the Vanilla JavaScript example on the isotope website. And check the Vue documentation on how to use $refs, which makes it easier to retrieve the element you need. — Maarten Veerman
– Maarten Veerman, Commented Oct 3, 2020 at 20:46

smonff · Accepted Answer · 2021-12-30 12:04:46Z

1

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

edited Dec 30, 2021 at 12:04

smonff

3,5084 gold badges40 silver badges49 bronze badges

answered Oct 3, 2020 at 20:46

nick

1264 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How in vuejs get querySelector element?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related