Vue.js Quick Example

by lindsay bradford

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js "></script>
<div id="demo">
  <ul>
    <li v-for="character in characters" track-by="uniqueField">
      {{ character[character.uniqueField] }}
    </li>
  </ul>
</div>

JavaScript

new Vue({
  el: '#demo',
  data: {
    characters: [
      { number: 1 },
      { number: 2 },
      { letter: 'a' },
      { letter: 'b' }
    ].map(function (character) {
    	return new Vue({
      	data: character,
        computed: {
        	uniqueField: function () {
          	return this.number ? 'number' : 'letter'
          }
        }
      })
    })
  }
});