vue-istope-basic

by David Desmaisons

HTML

<script src="https://npmcdn.com/[email protected]/dist/isotope.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>
<script src="https://cdn.rawgit.com/David-Desmaisons/Vue.Isotope/v2.0.1/dist/vue_isotope.js"></script>
<div id="main">
<div>
  <isotope :list="list" id="root_isotope" class="isoDefault" :options='option' >
    <div v-for="element in list" @click="selected=element"  :key="element.id">
      {{element.name}}
      <br> {{element.id}}
    </div>
  </isotope>
</div>

<div id="change">
  <button @click="add">Add</button>
  <button @click="replace">Replace</button>
</div>

<div>
  <div v-if="selected" class="item">
    <input type="text" name="" v-model="selected.name">
    <br>
    <input type="text" name="" v-model="selected.id">
  </div>
</div>
</div>

CSS

.item {
  background-color: #eee;
  padding: 10px;
  width: 200px;
  height: 200px;
  margin-bottom: 10px;
  box-sizing: border-box;
  font-family: monospace;
  color: #333;
}

.isoDefault {
  min-height: 210px;
}

JavaScript

var count = 0;
var vm = new Vue({
  el: "#main",
  data: {
    list: [{name: "John", id: 25 }, 
    {name: "Joao", id: 7}, 
    {name: "Albert", id: 12},
    {name: "Jean", id: 100}],
    selected: null,
    option: {
      getSortData: {
        id: "id"
      },
      sortBy : "id"
    }
  },
  methods: {
    add: function() {
      this.list.push({ name: 'Juan', id: count++ });
    },
    replace: function() {
      this.list = [{ name: 'Edgard', id: count++ }, 
     							 { name: 'James',  id: count++  }];
    }
  }
});