Question

我想在我的@ vue / cli 4.0.5 / Bootstrap 4.3 / jquery 3.4.1应用程序中使用https://isotope.metafizzy.co

我得到了Codepen https://codepen.io/desandro/pen/nFrte示例，并尝试在vue.js页面中运行它。当我有row时，我遇到了渲染到vue的一些问题：

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

我试图制造：

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',

我希望

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

但是看起来不像在itemElem_elem ::之后的控制台中：我看到html代码输出和下一个错误：

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

哪种方法正确？

谢谢！

Answer 1

根据https://github.com/metafizzy/isotope。也许您应该使用类似以下的内容：

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

$（'。grid'）！== document.querySelector（'。grid'）如您所见，querySelector返回一个DOM元素，其中$（）将返回一个知道同位素原型的jQuery对象

在vuejs中如何获取querySelector元素？

1 个答案: