Vue Component数据绑定中如何使用外部函数？答案

【问题标题】：How to use external functions in Vue Component data binding?Vue Component数据绑定中如何使用外部函数？
【发布时间】：2021-07-03 04:12:47
【问题描述】：

我是js新手，想在vue组件数据绑定中使用外部函数，但是没有成功

helper.js

function groupArrayOfObjects(list, key) {  
    return blah blah
}

function parseDate(d) {      
    return bla bla
}

export { groupArrayOfObjects, parseDate };

vue 组件：

Vue 警告]：属性或方法“parseDate”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。

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

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

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案1】：

尝试在方法选项中传播辅助函数：

import * as helpers from "@/assets/js/helper.js";

export default {
  methods: {
    abc() { groupArrayOfObjects(param1, param2); },
    ...helpers
   
  }
}

在模板中：

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

【讨论】：

【解决方案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,
  }
}

【讨论】：