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

Question

我正在使用一个 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 };
                    });
                }
        },

Answer 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 };
                    });
                }
        },