我可以在Vue.Js的计算属性中传递参数吗

理查德Itachi2020-03-09

这有可能在Vue.Js中的计算属性中传递参数。我可以看到在使用getters / setter进行计算时，他们可以采用参数并将其分配给变量。就像这里的文档：

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

这也是可能的：

// ...
computed: {
  fullName: function (salut) {
      return salut + ' ' + this.firstName + ' ' + this.lastName    
  }
}
// ...

其中，calculated属性接受一个参数并返回所需的输出。但是，当我尝试此操作时，出现此错误：

vue.common.js：2250未捕获的TypeError：fullName不是函数（...）

我应该在这种情况下使用方法吗？

乐小哥2020/03/09 22:53:51

我不确定您要实现的目标，但是看起来使用方法而不是计算方法将是完美的！

番长小胖2020/03/09 22:53:51

是的，那里有使用参数的方法。像上面提到的答案一样，在您的示例中，最好使用方法，因为执行非常轻便。

仅供参考，在方法复杂且成本高的情况下，可以缓存结果，如下所示：

data() {
    return {
        fullNameCache:{}
    };
}

methods: {
    fullName(salut) {
        if (!this.fullNameCache[salut]) {
            this.fullNameCache[salut] = salut + ' ' + this.firstName + ' ' + this.lastName;
        }
        return this.fullNameCache[salut];
    }
}

注意：使用此功能时，如果要处理数千个内存，请小心

Stafan泡芙2020/03/09 22:53:50

您可以使用方法，但是如果它们不变异数据或没有外部影响，我还是更喜欢使用计算属性而不是方法。

您可以通过这种方式将参数传递给计算属性（未记录，但由维护人员建议，不记得在哪里）：

computed: {
   fullName: function () {
      var vm = this;
      return function (salut) {
          return salut + ' ' + vm.firstName + ' ' + vm.lastName;  
      };
   }
}

编辑：请不要使用此解决方案，它只会使代码复杂，没有任何好处。

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer