重装砌体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

您是否考虑过使用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。

使用砌体组件

还有一个砌体Vue组件可能会使您更轻松： https://github.com/shershen08/vue-masonry

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