如何将变量传递给函数（在Vue2内部计算）？

Question

I try uses vue2.js

Code: http://jsbin.com/futuqoniso/1/edit?html,js

Console: http://output.jsbin.com/futuqoniso/1

But a variable "sort" is always undefined. How correctly to pass it in function?

computed: {
    sortedArray: function() {
      function compare(a, b, sort) {

        console.log(sort);

        if (a.name < b.name)
          return -1;
        if (a.name > b.name)
          return 1;
        return 0;
      }

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

I tried "this.sort" and other variants...

Answer 1

You can access any of your data properties by specifying the keyword this for example:

console.log(this.sort) 

and this should be :

    <a href="#" @click="sort = 'name'">name</a> 
    <a href="#" @click="sort = 'sex'">sex</a>

not :

    <a href="#" @click="sort = name">name</a> 
    <a href="#" @click="sort = sex">sex</a>

Answer 2

Something like this:

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; // define variable from this
      function compare(a, b) {

        console.log(sort);

        if (a.name < b.name)
          return -1;
        if (a.name > b.name)
          return 1;
        return 0;
      }

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

Also update template:

<p>{{sort}}
    Sort by: 
    <a href="#" @click="sort = 'name'">name</a> 
    <a href="#" @click="sort = 'sex'">sex</a>
  </p>