Rendering Lists in VueJs

A demo of rendering lists in VueJs using the v-for directive - http://coligo.io

by nkovacs

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="vue-instance">
  <button type="button" @click="foo">
    do something
  </button>
  <ul>
    <transition-group name="list">
      <!--
      <li class="list-item" v-for="item in inventory" :key="item.id" v-if="filtered === null || filtered === item.id">
        {{ item.name }} - ${{ item.price }}
      </li>
      -->
      <list-item v-for="item in inventory" :key="item.id" :item="item" :filtered="filtered" v-if="filtered === null || filtered === item.id"></list-item>
    </transition-group>
  </ul>
</div>

CSS

.list-item {}

.list-enter-active,
.list-leave-active {
  transition: all 1s;
}

.list-enter,
.list-leave-to
/* .list-leave-active below version 2.1.8 */

  {
  opacity: 0;
  transform: translateY(30px);
}

JavaScript

var listItem ={
	template: '<li class="list-item">{{ item.name }} - \${{ item.price }}</li>',
  props: {
  	item: {
    	type: Object,
      required: true,
    },
  	filtered: {
      default: null,
    },
  },
  methods: {
  	visible(item) {
      return this.filtered === null || this.filtered === item.id
    }
  }
}

var vm = new Vue({
  el: '#vue-instance',
  components: {
  	listItem,
  },
  data() {
    return {
      filtered: null,
      inventory: [{
          id: 1,
          name: 'MacBook Air',
          price: 1000
        },
        {
          id: 2,
          name: 'MacBook Pro',
          price: 1800
        },
        {
          id: 3,
          name: 'Lenovo W530',
          price: 1400
        },
        {
          id: 4,
          name: 'Acer Aspire One',
          price: 300
        }
      ]
    }
  },
  methods: {
    foo() {
      if (this.filtered === null) {
        this.filtered = 1
      } else {
        this.filtered = null
      }
    },
  }
});