Как использовать макет сетки Masonry в vuejs2 (с начальной загрузкой) без jquery?

Я хочу отображать твиты типа card-columns на своей странице.

Я не могу использовать Masonry в своем шаблоне vue webpack. Я пробовал это через 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
person Dhruv Goradiya    schedule 16.03.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я использовал vue-masonry.

(Нам нужно позаботиться о методе перерисовки this.$redrawVueMasonry(); при обновлении или изменении.)

person Dhruv Goradiya    schedule 19.03.2018