如何在Vue组件数据绑定中使用外部函数

Question

我是js新手，我想在vue组件数据绑定中使用外部函数，但它无法工作

helper.js

function groupArrayOfObjects(list, key) {  
return blah blah
}
function parseDate(d) {      
return bla bla
}
export { groupArrayOfObjects, parseDate };

vue组件：

Vue warn]：属性或方法"；parseDate"；未在实例上定义，但在渲染过程中被引用。通过初始化该属性，确保该属性在数据选项中是被动的，或者对于基于类的组件是被动的。

<template>
<div>{{parseDate(date) }}</div>  
</template>
import { groupArrayOfObjects, parseDate } from "@/assets/js/helper.js";
export default {
methods:{
abc(){ groupArrayOfObjects(param1, param2);}
}
}

Answer 1

尝试在方法选项中扩展辅助函数：

import * as helpers from "@/assets/js/helper.js";
export default {
methods: {
abc() { groupArrayOfObjects(param1, param2); },
...helpers

}
}

在模板中：

<template>
<div>{{parseDate(date) }}</div>  
</template>

Answer 2

不能在template中使用导入的函数，因为它们实际上不是组件的一部分。如果要使用这些导入的函数，则需要将它们添加到组件method对象中。类似于您对groupArrayOfObjects函数所做的操作。

import { groupArrayOfObjects, parseDate } from "@/assets/js/helper.js";
export default {
methods: {
abc() { groupArrayOfObjects(param1, param2); },

// either wrap your function
foo(date) { parseDate(date) },

// or just add it directly
parseDate,
}
}

Answer 3

您可以从helper导入parseDate函数，并为模板公开此函数。

<template>
<div>{{ parseDate(date) }}</div>
</template>
<script>
import { parseDate } as helpers from "@/assets/js/helper.js";
export default {
methods: {
parseDate
}
}
</script>