Не работаю эффекты для элементов полученных из API?

Question

[Kneepy]

Создал api на nodeJS получающее данные из таблицы в mysql, суть проблемы в том что когда я вывожу данные из пропсов этого элемента то всё работает, но не применяется masonry эффект и эффекты при кликах. Код родительского компонента в котором происходит получение данных из api:

<template>
   <Post
      v-bind:items="items"
   />
</template>
<script>
import Post from '@/components/modules/Post'
import axios from 'axios'
export default {
   components:{
      Post
   },
   data: () => {
      return{
         items: [],
      }
   },
   mounted() {
      axios.get('http://127.0.0.1:5000/api/posts', {
         headers: {'Content-Type': 'application/json',}
      }).then(response => (this.items = response['data'], this.items.hover = false))
   },
}
</script>

Comments

[tantumus21]

не уверен, но скорее всего дело в том, что masonry расставляет элементы до того, как получит новые. Следовательно, на новые элементы masonry не срабатывает. То же и с другими эффектами.
Или вы неправильно подключаете библиотеку

[Kneepy]

tantumus21, вот для меня и не понятно когда загружать эти элементы. Хуки created и beforeMount не работают в моём случае, а библиотека подключена правильно, до этого тестировал потом решил из готовой бд вывести

[Aetae]

Нахрена нам код родителя, если проблемы, очевидно, в том, как ты применяешь эффекты в ребёнке?)

[Kneepy]

Aetae, так вывод данных из бд происходит нормально, если я вас правильно понял, проблема в том что marsony и события не применяются к этим блокам

[Aetae]

Kneepy, я не вижу никакого marsony.

[Kneepy]

Aetae, он подключен глобально и используется через директиву v-masonry

<template>
   <div class="posts" v-masonry="" transition-duration="3s" item-selector=".post">
      <div class="post" 
         v-for="(item, index) in (items)" 
         :key="index" 
         @mouseover="item.hover = true"
         @mouseleave="item.hover = false"
      >
         <div class="postInfo" v-if="item.hover">
            <button class="postSaveBth">
               Сохранить
            </button>
            <div class="postMove">
               <a class="postOfficalUrl" href="#">
                  <span class="material-icons-round">
                     north_east
                  </span>
                  mobile-twitter.ru
               </a>
               <button class="postShare postMoveBth" style="margin-left: auto;">
                  <span class="material-icons-round">
                     share
                  </span>
               </button>
               <button class="postSettings postMoveBth">
                  <span class="material-icons-round">
                     more_horiz
                  </span>
               </button>
            </div>
         </div>
         <img :src="item.filePost" style="width: 252px">
      </div>
   </div>
</template>
<script>
export default {
   props: ['items'],
}
</script>

[Aetae]

Kneepy, если используется это, то вполне очевидным отличием вашего кода от примера является отсутствие использования вами v-masonry-tile для плиток.

[Kneepy]

Aetae, помогло! Правда проблема с эффектами при наведении так и осталась(

[Aetae]

Kneepy, опять же, какие эффекты, где, как они предоположительно должны работать и почему?

[Kneepy]

Aetae,

@mouseover="item.hover = true"
@mouseleave="item.hover = false"

[Aetae]

Есть ли свойство hover в каждом item до того как оно попадёт в массив items? Потому что реактивность в vue применяется только к уже существующим свойствам.
Если вот это

this.items = response['data'], this.items.hover = false

ваша попытка добиться такого результата, то это - провал. Во-первых: hover тут добавляется конкретно массиву, а не элементам в нём, во-вторых: он добавляется после попадания в data, т.е. после применения реактивности, а потому не учитывается vue.

tl\dr

@mouseenter="$set(item, 'hover', true)"
@mouseleave="$set(item, 'hover', false)"

[Kneepy]

Aetae, большое вам спасибо за уделённое время! Добавьте последний комментарий в ответы я отмечу его решением

[Aetae]

Kneepy, циклом. Первые страницы любого учебника по любому языку программирования.

[Kneepy]

Aetae, я уже на приличном уровне знаю php и js, пытался циклом, но vue marsony с двумя циклами без директивы v-masonry-tile не работал

[Kneepy]

Aetae, ещё если не трудно что такое $set?

[Aetae]

Kneepy, рекомендую прочитать: https://ru.vuejs.org/v2/guide/reactivity.html
Лучше чем там, я всё равно не скажу.

Answer 1

[tantumus21]

Посмотрите здесь и здесь

Comments

[Kneepy]

tantumus21?, там решение немного для других задач

Answer 2

[Николай]

Хм, может быть банально, но как вам помочь с эффектами, если вы показываете код запроса ?

Показывайте код, где у вас работает клики и наложение.
Тут по запросу равносильно, как гадать на кофейной гуще

Например вот это у вас что ?
this.items.hover
Vue не видит реактивности в объекте, в котором вы добавили новое свойство, так как оно изначально не объявлено
, вам надо использовать this.$set()
ну и у вас изначально items это массив, а потом вы его в объект превращаете,
И дальше происходит какая-то магия, так как компонента не видно и не понятно что у вас там происходит и без этого, никто вам не поможет=(

Comments

[Kneepy]

Vue не видит реактивности в объекте, в котором вы добавили новое свойство, так как оно изначально не объявлено
, вам надо использовать this.$set()

с этим вопросом мне уже помогли в комментариях)