如何在没有 jquery 的情况下在 vuejs2(with bootstrap) 中使用 Masonry 网格布局？

Question

我想在我的页面中显示像 card-columns 这样的推文。

我无法在我的 vue webpack 模板中使用 Masonry。我已经通过 npm 和 CDN 尝试过，但没有正确获取网格。

在main.js

import Tweet from 'vue-tweet-embed';
import Masonry from 'masonry-layout';

在html

<head>
//....
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
</head>

在模板中

<div class="grid">
    <div class="grid-item" v-for="i in topics">
        <Tweet class="" :id="i.tweets.quoted_status_id_str" :options="{ theme: 'light' }" error-message-class="text-center text-muted tweet_err"><div class="text-center text-muted card" style="margin-top:12px;min-width:30px;"><i class="ion-social-twitter"></i>Loading tweet...</div></Tweet>
    </div>
</div>

Answer 1

我用过vue-masonry.

（我们需要注意重绘方法 this.$redrawVueMasonry(); 在更新或更改时。）

如何在没有 jquery 的情况下在 vuejs2(with bootstrap) 中使用 Masonry 网格布局？

How to use Masonry grid layout in vuejs2(with bootstrap) without jquery?

vuejs2

bootstrap-4

masonry

tweets