Интеграция изотопов и Vue

Question

Я только начал использовать vue около месяца назад и люблю его до сих пор. В настоящее время я сталкиваюсь с некоторыми проблемами, использующими его вместе со стороной isotope.js, библиотекой фильтрации/сортировки/компоновки.

Проблема заключается в том, что изотоп хочет контролировать добавление и удаление элементов в макете (в настоящее время выполняется с помощью jquery). Если я добавлю элемент с jquery, vue не знает о какой-либо функциональности элемента (ищет события и т. П.), И если добавить с представлением, изотоп не знает, как организовать элемент.

Я проиллюстрировал проблему в this fiddle. Обратите внимание, что щелчок удаляет элемент из контейнера, и нажатие на удаление из изотопа также удаляет элемент из контейнера vue, но не наоборот. Нажатие также пытается войти в консоль, что, конечно же, работает только с элементами, помещенными в DOM с помощью v-for.

Я нашел временную работу, которая вручную синхронизирует два, но это далеко не идеально.

Что такое идиоматический способ решения этой проблемы? Очевидно, мне бы хотелось использовать v-для добавления и удаления элементов. Пришло ли время для пользовательской директивы? С чего начать?

Добавление элементов таким образом является анти-шаблоном, но я не знаю, как еще сделать из них изотоп.

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. Он раскрывает всю доступную опцию изотопа и делает фильтрацию и сортировку реактивной к изменениям свойств. Он используется таким же образом, как об-за директивы:

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

Пример:

Пример на fidlle: fiddle 1, fiddle 2, fiddle 3

Доступен на github:Vue.Isotope