Почему не работает плагин vue-masonry после ajax запроса?

Question

[Vanya Huk]

После установки плагина vue-masonry все работало прекрасно до того момента, пока ненужно было обновлять список статей ajax запросом.
вот код компоненты vue.js

<template>
    <div class="grid-container">
        <div v-masonry transition-duration="0.3s" item-selector=".item">
            <div v-masonry-tile class="item col-lg-3 col-md-3 col-sm-12 col-xs-12" v-for="article in articles">
                test
            </div>
        </div>
    </div>
</template>
<script>

export default{

    data : function () {
        return {
            articles : {}
        }
    }, 
    
    mounted : function () {

        this.get_articles()

    },


    methods : {

        get_articles : function () {

            this.$http.post( window.location.origin + window.location.pathname ).then(response => {

                this.articles = response.body;

        },response => {});
        }

    }

}
</script>

когда вместо v-for="article in articles" пишу v-for="article in 10" все работает
вот ссылка на репозиторий

Answer 1

[0xD34F]

А сам запрос-то происходит? Если вдруг да - успешен ли? Если снова да - что в response.body?

UPD. Вынесено из комментариев:

с респонсом все впорядке
<...>
нехочет переиницыализировать плагин

Понятно. Тогда надо "переиницыализировать" вручную. После получения данных и завершения обновления DOM:

watch: {
  массивДанных() {
    this.$nextTick(this.$redrawVueMasonry);
  },
},

Comments

[Vanya Huk]

все успешно, только не позиционирует елементы

[0xD34F]

Какие элементы-то? Ещё раз - что у вас в response.body?

[Vanya Huk]

0xD34F, смотрите, контент, который я запрашываю ajax-ом возвращаеться и выводиться, только проблема в его позиционировании, почему-то скачет верстка после ajax

[0xD34F]

Не вижу, чтобы выводился возвращаемый ajax-ом контент. У вас там див со словом test, и ничего более.

[Vanya Huk]

0xD34F, с респонсом все впорядке, говорю вам )
там нехочет переиницыализировать плагин, хотя по документации все работает

[Vanya Huk]

0xD34F, хмм смотрите в чем проблема была, я билд делаю через gulp, и когда вызов идет gulp watch все работает отлично, но когда через gulp watch --production все, что сделано ajax-ом - валиться

Answer 2

[Evgeny Kulakov]

Судя по доке вот эту штуку надо вызвать при изменении элементов: this.$redrawVueMasonry()

Comments

[Vanya Huk]

пробовал, не работает никак

[Evgeny Kulakov]

Vanya Huk, что в this.articles после выполнения запроса находится?

[Vanya Huk]

Evgeny Kulakov, смотрите в чем проблема была, я билд делаю через gulp, и когда вызов идет gulp watch все работает отлично, но когда через gulp watch --production все, что сделано ajax-ом - валиться