如何在Vue.js 3更新()生命周期挂钩上更新砌体？
提问于 2022-02-03 02:43:07
我有一个关于砖石布局更新的问题。如何在Vue.js (Version 3)生命周期钩子"updated()“中触发它？
我有一个卡片网格视图，如下面的代码(在这里使用引导5)，但是当一个卡片改变它的大小时，很难更新砖石布局。我知道我可以使用layout() 见文件，但是我不知道如何在我的示例中调用它。
因此，我的主要问题是，当在()函数中初始化时，我不知道如何在更新的函数中使自己的砌体对象可访问。我该怎么做？
<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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-02-03 12:18:12
要缓存结果Masonry实例的引用，只需将其赋值给属性(不需要在该实例上进行反应性，因此附加属性就可以了)：
export default {
mounted() {
this._masonry = new Masonry(this.$refs.masonry, ⋯)
},
updated() {
this._masonry.layout()
}
}但是，您会注意到，this._masonry.layout()调用实际上并没有重新布局砌体项(可能是由于库的某些限制)。我看到的唯一解决办法是重新创建Masonry实例，然后不再需要缓存对它的引用：
export default {
mounted() {
this.$nextTick(() => this.layout())
},
updated() {
this.layout()
},
methods: {
layout() {
new Masonry(this.$refs.masonry, ⋯)
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70969854
复制
腾讯云开发者
