javascript - 在Vue模板中从帮助器调用函数

在我的辅助函数中，我具有ConvertToSome函数：

export function convertToSome(item) {
  item = item.toString();
  var qq = "qwqe";
  for(var i=0;i<10;i++)
  {
    item = item.split(i).join(qq[i]);
  }
  return item;
}

在我的Vue中，我有这样的组件：

import { convertToSome } from '../../../helpers';

当我想在组件中使用此功能时，出现此错误：

TypeError: "_vm.convertToSome is not a function"

如何在模板中使用此功能？

最佳答案

使用import语句（import { convertToSome } from '../../../helpers';），可以在Vue实例中创建本地方法，并在内部使用导入的函数：

  methods: {
    convertToSome(item) {
      // "convertToSome" inside is the imported function
      return convertToSome(item);
    }
  }

您可以在脚本中的任何位置调用this.convertToSome(item)来调用Vue方法，该方法将使用导入的函数。

...或直接在您的模板中：

<div> {{ convertToSome(item) }} <div>

您还可以将导入的函数用作filter（由@thanksd提出），这似乎更适合您的情况：

  filters: {
    convertToSome(item) {
      return convertToSome(item);
    }
  },

...您可以直接在模板中使用：

<div> {{ foo | convertToSome }} <div>