javascript - 从 Vue 模板中的助手调用函数

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 语句 ( 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>