Question

在我的Helper函数中，我具有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 { 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
    }
}

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

2 个答案: