使用Masonry.JS和Vue.JS

西门路易2020-03-16

masonry.js除了vue，我知道如何使用。但是，我在使它起作用并在vue框架中正确调用时遇到问题。我在创建或准备就绪的内部调用它，但似乎都无法正确地形成网格。我如何才能在框架内使用它？哦，在此脚本之前，我确实在html中调用了jquery。这是组件内部的内容：

编辑：

我可以看到砖石通过用JS分配其高度并将项目更改为绝对位置来影响网格。但是，它放置不正确。它将它们堆叠在彼此之上，而不是像应该在网格中那样并排堆叠。

<template>
  <div class="projects--container">
    <div class="inner-section inner--options">
        <div class="grid">
            <div class="grid-item"></div>
            <div class="grid-item"></div>
            <div class="grid-item"></div>
        </div>
    </div>
  </div>
</template>

<script>
 export default{
    ready: function () {
        this.mason();
    },
     data: function () {
         return {
             options: [
                 {
                   option: 'projects',
                     phrase: 'for clients',
                     slogan: 'slogan...'
                 },
                 {
                     option: 'sides',
                     phrase: 'for us',
                     slogan: 'we love what we make'
                 },
                 {
                     option: 'moments',
                     phrase: 'with the crew'
                 }
             ]
         }
     },
     methods: {
         revert: function () {
             this.$dispatch('return-home', true)
         },
         mason: function () {
             var $grid = $('.grid').masonry({
                 itemSelector: '.grid-item',
                 columnWidth: 250
             });
             $grid.masonry('layout');
         }
     },
     events: {
         'option-select': function (option) {
         }
     }

 }
</script>

斯丁Gil2020/03/16 15:32:44

在Vue2中，没有ready生命周期挂钩之类的东西。相反，mounted一旦实例按照您的想法“准备就绪”，就会触发生命周期挂钩。

参考：https : //vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

番长凯2020/03/16 15:32:44

可能是垂直堆栈只是表明砌体没有工作（没有codepen / plunkr很难分辨）。@ riyaz-ali虽然有正确的想法。

神乐小宇宙Gil2020/03/16 15:32:44

我猜想这样做的方法是使用refs。只需将ref属性分配给模板内的html元素，然后使用已挂载的callback中的vm。$ ref实例属性即可访问它。

示例代码可能如下所示：

<template>
  <div class="grid" ref="grid">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
  </div>
</template>

<script>
  import Masonry from "masonry"; // or maybe use global scoped variable here
  export default {
    mounted: function(){
      let $masonry = new Masonry(this.$refs.grid, {
        // masonry options go in here
       // see https://masonry.desandro.com/#initialize-with-vanilla-javascript
      });
    }
  }
</script>

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer