Как исправить ошибки vue-masonry?

Question

[wlms]

Подключил в main.js так:

import Vue from 'vue'
import {VueMasonryPlugin} from 'vue-masonry'

Заюзал так :
Vue.use(VueMasonryPlugin)

В jade вызываю так:

.masonry(v-masonry, transition-duration='1s')
          v-card(
            v-masonry-tile,
            v-for='profile in items',
            :key='profile.id'
            )
            v-img(:src="`${profile.avatar}`", aspect-ratio='2')

Вываливает ошибки:

spoiler

[Vue warn]: Property or method "v" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declari...

ПРИ ЭТОМ: Сам плагин работает, но как то не понятно и коряво
Про хуки понятно, вроде. Но что или как я должен вызывать в нем? Я же его заюзал в Vue.use(VueMasonryPlugin). Все должно работать.(?)
Ссылка на репу vue-masonry

Answer 1

[wlms]

Проблема решилась так:
Не рабочий вариант
.div(v-masonry transition-duration='3s', item-selector='.item')

Рабочий вариант
.div(v-masonry='', transition-duration='3s', item-selector='.item')

Видимо, особенности Jade

Answer 2

[karambafe]

Такая ошибка обычно возникает, когда в шаблоне используется переменная, которая не объявлена в компоненте в data/props/computed.

В вакууме тяжело сказать ошибка это плагина или кода внутри компоненты.
Сделал маленький пример, где просто подключил библиотеку и заюзал директиву v-mansory - никаких ошибок в консоли нет (codesanbox), так что скорее всего надо искать косяки в шаблоне компоненты

Comments

[Roman Alekseiev]

 у Вас ссылка битая