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

Posted 2023-02-22

【中文标题】Vue Component数据绑定中如何使用外部函数？

【英文标题】：How to use external functions in Vue Component data binding?

【发布时间】：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);
        
    

【参考方案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,