集成同位素和 Vue

Question

我大约一个月前才开始使用 vue，到目前为止我很喜欢它。目前我在使用它时遇到了一些问题isotope.js，一个光滑的过滤/排序/布局库。

问题是isotope想要控制在布局中添加和删除元素（目前用jquery完成）。如果我用 jquery 添加一个项目，vue 不知道该项目的任何功能（寻找事件等），如果我添加视图，同位素不知道排列元素。

我已经在这个 fiddle 中说明了这个问题。请注意，单击从容器中删除一个元素，单击从同位素中删除也会从 vue 容器中删除元素，但反之则不然。单击还会尝试登录到控制台，这当然仅适用于使用 v-for 放入 DOM 的元素。

我找到了一种临时解决方法，可以手动使两者保持同步，但这远非理想。

解决这个问题的惯用方法是什么？显然，我希望能够使用 v-for 来附加和删除项目。是时候制定自定义指令了吗？我从哪里开始？

以这种方式添加元素是一种反模式，但我不知道如何让同位素意识到它们。

add: function(thing) {

  // add to isotope - vue is unaware of the test() fn when it enters the DOM
  this.iso.isotope('insert', $('<span @click="test()" class="thing">' + thing.name + '</span>'))

  // add to vue
  this.things.push({
    name: thing.name
  })
  this.itemName = ""

},

谢谢！

Answer 1

我创建了一个指令来在 vue.js 中使用同位素。它公开了同位素中可用的所有选项，并使过滤和排序对属性变化做出反应。它的使用方式与 v-for 指令类似：

<div v-isotope="element in list1">
    <p>{{element.name}}</p>
</div>

例子：

fiddle示例：fiddle 1 , fiddle 2 , fiddle 3

在 github 上可用： Vue.Isotope