jquery - 整契约(Contract)位素和Vue

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

问题是同位素想要控制布局中元素的添加和删除(当前使用jquery完成)。如果我添加带有jquery的项目，则vue不知道该项目的任何功能(查找事件等)，如果我添加了view，则同位素不知道如何布置元素。

我已经在this 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 = ""

},

谢谢!

最佳答案

我创建了一个将同位素与vue.js结合使用的指令。它公开了同位素中可用的所有选项，并使过滤和排序对属性更改有反应。它的用法与v-for指令类似:

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

示例:

关于文件的示例:
fiddle 1，fiddle 2，fiddle 3

在github上可用: Vue.Isotope