Перезагрузка кладки Vue

Question

Я использую кладку в списке карточек, когда я добавляю новую карточку, мне нужно перезагрузить кладку. Я не знаю, как вызвать функцию для перезагрузки кладки

mounted(){
  let wrapper = this.$refs.wrapper;
  let msnry = new Masonry(wrapper, {
    itemSelector: '.note',
    gutter: 10,
    percentPosition: true
  });
}

watch: {
  array: function(val) { // watch it
    if(val){
      msnry.reloadItems(); // function for reloading items
      msnry.layout(); // function for rerendering layout
    }
  }
}

Может быть, msnry следует определять глобально? Но в учебнике по React он вызывается таким же образом. Как я мог справиться с этим

Answer 1

Чтобы решить вашу проблему

Я не уверен, как выглядит ваш <template>, но вы, вероятно, хотите настроить наблюдателя так, чтобы он смотрел array глубоко:

watch: {
  array: {
    deep: true,
    handler: function(val) { // watch it
      if(val){
        msnry.reloadItems(); // function for reloading items
        msnry.layout(); // function for rerendering layout
      }
    }
  }
}

Больше информации в документации .

Использование каменной кладки

Существует также этот компонент кладки, который может упростить вам задачу: https://github.com/shershen08/vue-masonry

Он основан на той же библиотеке, но хорошо оборачивает ее и облегчает использование в других компонентах Vue.

Answer 2

Думали ли вы об использовании для него компонента Vue?

https://www.npmjs.com/package/vue-masonry

Эта карта должна автоматически отображать новые карты и т. Д.