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

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

1 个答案: