重新加载masonry Vue

Question

我在卡片列表中使用masonry，当我添加新卡片时，我需要重新加载masonry。我不知道如何调用函数来重新加载砖石

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

你有没有考虑过使用Vue组件？

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

这应该会自动渲染新的卡片等。

Answer 2

来解决你的问题

我不确定您的<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
      }
    }
  }
}

in the docs有更多信息。

使用砖石组件

还有一个masonry vue组件，它可能会让您的工作变得更容易：https://github.com/shershen08/vue-masonry

它基于相同的库，但它很好地包装了它，并使其易于在其他Vue组件中使用。