vue-istope-example

by kabanoki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.min.js"></script>
<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/v.1.1.0/src/vue_isotope.js"></script>
<div id="app">
  <div></div>
  <div>
    <button class="btn" v-for="item in sortProp" @click="sort(item.key)" :key="item.key">{{item.name}}</button>
  </div>
  <isotope ref="cpt" :options='option' :list="list" @sort="sortOption='age'">
    <div class="card" v-for="element in list" :key="element.id">
      <div class=""><img :src="element.image_url"></div>
      <p>{{element.name}}</p>
    </div>
  </isotope>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<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.jsdelivr.net/gh/David-Desmaisons/[email protected]/src/vue_isotope.js"></script>

CSS

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

.is-checked {
  background-color: #28F;
}

.isoDefault {
  min-height: 210px;
}

JavaScript

let app = new Vue({
  el: '#app',
  data: {
    list: [
      {
        name: 'おじいさん',
        image_url: "./img/tsue_koukikoureisya_ojiisan.png",
        age: 76, 
        height: 170, 
        weight: 52,
        gender: '男性'
      },
      {
        name: 'おばあんさん',
        image_url: "./img/tsue_koukikoureisya_obaasan.png",
        age: 73, 
        height: 152, 
        weight: 46,
        gender: '女性'
      },
      {
        name: 'おじさん',
        image_url: "./img/himan_pocchari07_ojisan.png",
        age: 56, 
        height: 178, 
        weight: 80,
        gender: '男性'
      },
      {
        name: 'お父さん',
        image_url: "./img/himan_pocchari08_obasan.png",
        age: 55, 
        height: 175, 
        weight: 72,
        gender: '男性'
      },
      {
        name: 'お母さん',
        image_url: "./img/agura_kutsurogu3_ojisan.png",
        age: 54, 
        height: 160, 
        weight: 52,
        gender: '女性'
      },
      {
        name: 'おばさん',
        image_url: "./img/agura_kutsurogu7_obasan.png",
        age: 53, 
        height: 162, 
        weight: 60,
        gender: '女性'
      },
      {
        name: '息子',
        image_url: "./img/kid_seikaku_kachiki_boy.png",
        age: 10, 
        height: 160, 
        weight: 52,
        gender: '男性'
      },
      {
        name: '娘',
        image_url: "./img/kid_seikaku_kachiki_girl.png",
        age: 8, 
        height: 150, 
        weight: 40,
        gender: '女性'
      },  
      {
        name: '従兄弟',
        image_url: "./img/kid_seikaku_uchiki_boy.png",
        age: 10, 
        height: 155, 
        weight: 42,
        gender: '男性'
      }              
    ],
    option: {
      getSortData: {
        name: function(itemElem) {
          return itemElem.name.toLowerCase();
        },
        age: function(itemElem) {
          return itemElem.age.toLowerCase();
        },
        height: function(itemElem) {
          return itemElem.height.toLowerCase();
        },
        weight:...