JSFiddle - React, Tailwind, and code Playground

by Murat Kezli

HTML

<script src="//unpkg.com/[email protected]/dist/vue.js"></script>
<div id="string">
  <ul>
    <li v-for="array in haberlistesirali">{{ array.name }}</li>
  </ul>
</div>

JavaScript

// Vue.js v. 2.1.8
var string = new Vue({
  el: '#string',
  data: {
    haberliste: [{
      name: 'sonya',
      sex: 'woman'
    }, {
      name: 'sindell',
      sex: 'woman'
    }, {
      name: 'kano',
      sex: 'man'
    }, {
      name: 'striker',
      sex: 'man'
    }, {
      name: 'subzero',
      sex: 'man'
    }]
  },
  computed: {
    haberlistesirali: function() {
      function compare(a, b) {
        if (a.sex < b.sex)
          return -1;
        if (a.sex > b.sex)
          return 1;
        return 0;
      }

      return this.haberliste.sort(compare);
    }
  }
})