Vue + Isotope Test
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="npmcdn.com/isotope-packery@2/packery-mode.pkgd.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/isotope.pkgd.js"></script>
<div id='vueContainer'>
<div class="thingContainer"></div>
<!-- filled using jquery/isotope-->
<hr>
<div class="otherContainer">
<span class="thing" @click="test(), removeVue(thing.name)" v-for="thing in things">{{thing.name}}</span>
</div>
<input v-on:keyup.enter="add({name:itemName})" v-model="itemName">
</div>
CSS
.thing {
outline: 1px solid;
margin: 10px;
padding: 5px;
display: inline-block;
}
.otherContainer {
max-width: 300px;
height: 200px;
}
.thingContainer {
max-width: 300px;
height: 200px;
}
* {
outline: 1px solid
}
JavaScript
var vueIsoTest = new Vue({
el: '#vueContainer',
data: {
things: [],
itemName: ""
},
ready: function() {
var that = this;
var iso = this.iso = $('.thingContainer').isotope({
layoutMode: 'masonry',
itemSelector: '.thing'
});
iso.on('click', '.thing', function(event) {
that.removeIso(event.target.innerHTML, this)
});
},
methods: {
add: function(thing) {
// add to isotope
this.iso.isotope('insert', $('<span @click="test()" class="thing">' + thing.name + '</span>'))
// add to view
this.things.push({
name: thing.name
})
this.itemName = ""
},
removeIso(name, element) {
this.iso.isotope('remove', element).isotope('layout');
this.things = this.things.filter(function(el) {
return el.name !== name;
});
},
removeVue(name){
for(var thingIndex=this.things.length -1; thingIndex>=0; thingIndex--){
if(name == this.things[thingIndex]['name']) {
this.things.splice(thingIndex, 1)
break
}
}
},
test(){
console.log('test here')
}
}
});