如何在没有 jquery 的 vuejs2（带引导程序）中使用砌体网格布局？答案

【问题标题】：How to use Masonry grid layout in vuejs2(with bootstrap) without jquery?如何在没有 jquery 的 vuejs2（带引导程序）中使用砌体网格布局？
【发布时间】：2018-03-16 10:06:13
【问题描述】：

我想在我的页面中显示类似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>

【问题讨论】：

标签： vuejs2 bootstrap-4 masonry tweets

【解决方案1】：

我用过vue-masonry。

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

【讨论】：