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

Question

在我的辅助函数中，我具有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"

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

Answer 1

使用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>

Answer 2

刚刚将导入的函数分配给数据属性，如下所示

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

然后在数据部分；

data(){
    return {
      convertToSome: convertToSome
    }
}