Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
​
  <div id="string">
  <p>
    {{sort}} - Sort by: 
    <a href="#" @click="sort = 'name'">name</a> 
    <a href="#" @click="sort = 'sex'">sex</a>
  </p>
​
  <ul>
    <li v-for="array in sortedArray">{{ array.name }}</li>
  </ul>
</div>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>  
</body>
</html>
 
​
 
var string = new Vue({
  el: '#string',
  data: {
​
    sort: 'name',
​
    arrays: [{
      name: 'sonya',
      sex: 'woman'
    }, {
      name: 'sindell',
      sex: 'woman'
    }, {
      name: 'kano',
      sex: 'man'
    }, {
      name: 'subzero',
      sex: 'man'
    }]
  },
  computed: {
    sortedArray: function() {
​
      var sort = this.sort;
​
      function compare(a, b) {
​
        console.log(sort);
​
        if (a.sort < b.sort)
          return -1;
        if (a.sort > b.sort)
          return 1;
        return 0;
      }
​
      return this.arrays.sort(compare);
    }
  }
})
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers