Question

我试图学习VueJS并且它进展顺利但我遇到了一个问题，我无法让多个组件在一个页面上工作，由于某种原因html会加载但是我export default中的所有内容都无法正常工作。

所以我有两个组件：ShortenerComponent和一个StatsComponent，ShortenerComponent工作并完成它应该做的一切，但StatsComponent只会加载html而不会在export default内做任何事情这是我的代码：

StatsComponent.vue（除了方法和html之外，ShortenerComponent是相同的。）：

<script>
// get the csrf token from the meta
var csrf_token = $('meta[name="csrf-token"]').attr('content');

export default {
    data() {
        return {

        };
    },

    test() {
        this.getStats();
    },
    methods: {
        // get all the existing urls
        getStats() {
            console.log('console log something');
            axios.get('urls').then((response) => {
                console.log('console log something');
            });
        },

    }
}

我的缩短组件：

<script>
// get the csrf token from the meta
var csrf_token = $('meta[name="csrf-token"]').attr('content');

export default {
    data() {
        return {
            shortUrl: '',
            url: '',
            error: '',
        };
    },

    methods: {
        createUrl() {
            axios({
                method: 'post',
                url: '/',
                data: {
                    _token: csrf_token,
                    url: this.url
                },
            }).then(response => {
                console.log(response);
                this.shortUrl = response.data.hash;
            }).catch(error => {
                this.error = error.response.data.message;
            });
        }
    }
}

最后但并非最不重要的是我的app.js文件

Vue.component('shortener',require('./components/ShortenerComponent.vue'));
Vue.component('stats', require('./components/StatsComponent.vue'));

var vue = new Vue({
    el: '#app',
});

我希望有人能弄清楚我做错了什么：D

Answer 1

所以在我的代码中我有test方法，我认为会调用getStats方法。我现在没有的是Vue具有创建实例后用于运行代码的创建方法。

所以我必须做的是：

function created()
{
   this.getStats();
}

来源：Vue instance Lifecycle Hooks

VueJS在一个视图中有多个组件

1 个答案: