Question

我尝试使用vue2.js

代码：http://jsbin.com/futuqoniso/1/edit?html,js

控制台：http://output.jsbin.com/futuqoniso/1

但是变量“sort”总是未定义的。如何正确地将其传递给函数？

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);
    }
  }

我试过“this.sort”和其他变种......

Answer 1

您可以通过指定关键字this来访问您的任何数据属性，例如：

console.log(this.sort)

这应该是：

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

不是：

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

Answer 2

这样的事情：

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);
    }
  }
})

同时更新模板：

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

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

2 个答案: