如何将组件内的 vue.js 方法转换为已创建的方法

Posted 2023-02-23

【中文标题】如何将组件内的 vue.js 方法转换为已创建的方法

【英文标题】：How to turn vue.js method inside a component to a created method

【发布时间】：2019-10-14 11:46:40

【问题描述】：

我正在使用一个 vue.js 代码库，其中组件内的方法被 onclick() 调用

相反，我希望该方法仅在页面加载时运行，而不是由 onclick 调用。阅读 vue.js 文档，我相信我需要使用一个名为 created() 的 vue 方法，我可以简单地将 'method' 替换为 'created' 或者我需要做什么才能在页面加载时运行此方法。

<script>
    Vue.component('job-execs', 
        delimiters: [ '[[', ']]' ],
        props: ['job'],
        data: function() 
                return 
                    showExecs: false,
                    build_ids: []
                
            ,
        methods: 
            jobExecs() 
                url = "api/v2/exec?" + this.job.api_url + "&limit=10"
                fetch(url)
                    .then(response => response.json())
                    .then(body => 
                        for(i=0; i<body.length; i++)
                            start_date = JSON.stringify(body[i].time_start)
                            start_date = start_date.match(/"?(.*)T(.*)/)[1];
                            this.build_ids.push(
                                'id': JSON.stringify(body[i].id),
                            )
                        
                    )
                    .catch( err => 
                        console.log('Error Fetching:', url, err);
                        return  'failure': url, 'reason': err ;
                    );
                
        ,

【参考方案1】：

作为vuejs应用的生命周期，vuejs做的第一件事就是运行created，

所以在您的情况下，您应该将 jobExecs 函数放在 created 挂钩中。

更多信息请查看Instance Lifecycle Hooks Vuejs doc

在这种情况下，您的组件将如下所示：

<script>
    Vue.component('job-execs', 
        delimiters: [ '[[', ']]' ],
        props: ['job'],
        data: function() 
                return 
                    showExecs: false,
                    build_ids: []
                
            ,
        created() 
               this.jobExecs();
        ,
        methods: 
            jobExecs() 
                url = "api/v2/exec?" + this.job.api_url + "&limit=10"
                fetch(url)
                    .then(response => response.json())
                    .then(body => 
                        for(i=0; i<body.length; i++)
                            start_date = JSON.stringify(body[i].time_start)
                            start_date = start_date.match(/"?(.*)T(.*)/)[1];
                            this.build_ids.push(
                                'id': JSON.stringify(body[i].id),
                            )
                        
                    )
                    .catch( err => 
                        console.log('Error Fetching:', url, err);
                        return  'failure': url, 'reason': err ;
                    );
                
        ,

【讨论】：

我建议将 jobExecs 保留为方法并从生命周期挂钩中调用它。

如何从生命周期钩子调用 - 示例？

@david 例如，只需从 created 或 mounted 挂钩中调用 this.jobExecs()。

@HusamIbrahim 是的，你是对的，我要编辑我的回答