如何在 Vue.js 3 updated() 生命周期钩子上更新 Masonry？

Question

我对 Masonry 布局更新有疑问。如何在 Vue.js（版本 3）生命周期挂钩“updated()”中触发它？

我有一个卡片网格视图，如以下代码（此处使用 Bootstrap 5），但很难更新 Masonry 布局，例如一张卡片改变了它的大小。我知道我可以使用 layout() see documentation 但我不知道如何在我的示例中调用它。

所以我的主要问题是，当在 mounted() 函数中初始化时，我不知道如何使我的 Masonry 对象在更新的函数中可访问。我该怎么做？

<template>
  <div
    class="row justify-content-left"
    data-masonry='{"percentPosition": true }'
  >
    <div class="col-md-6 col-lg-4 col-xxl-3 mb-4 card-col">
      <Card 1 />
    </div>
    <div class="col-md-6 col-lg-4 col-xxl-3 mb-4 card-col">
      <Card 2 />
    </div>
    <div class="col-md-6 col-lg-4 col-xxl-3 mb-4 card-col">
      <Card 3 />
    </div>
    <div class="col-md-6 col-lg-4 col-xxl-3 mb-4 card-col">
      <Card 4 />
    </div>
  </div>
</template>

<script>
[imports ...]

export default {
  name: "ComponentName",
  components: {
    [components ...],
  },
  mounted: function () {
    // initialize masonry
    this.$nextTick(function () {
      var row = document.querySelector("[data-masonry]");
      new Masonry(row, {
        // options
        percentPosition: true,
      });
    });
  },
  updated: function() {
    //-->how to call the relayout of Masonry here?
  }
};
</script>

Answer 1

要缓存对生成的 Masonry 实例的引用，只需将其分配给属性（您不需要对此实例具有反应性，因此附加属性就可以了） :

export default {
  mounted() {
    this._masonry = new Masonry(this.$refs.masonry, ⋯)
  },
  updated() {
    this._masonry.layout()
  }
}

但是，您会注意到 this._masonry.layout() 调用实际上并不 re-layout 砌体项目（可能是由于库的某些限制）。我看到的唯一解决方法是重新创建 Masonry 实例，然后您不再需要缓存对它的引用：

export default {
  mounted() {
    this.$nextTick(() => this.layout())
  },
  updated() {
    this.layout()
  },
  methods: {
    layout() {
      new Masonry(this.$refs.masonry, ⋯)
    }
  }
}

demo

如何在 Vue.js 3 updated() 生命周期钩子上更新 Masonry？

How to update Masonry on Vue.js 3 updated() lifecycle hook?

grid-layout

masonry

vue.js

vuejs3

bootstrap-5