Question

我正试图绕过Vue - 尤其是将数据从Vue实例传递到组件。我也在使用Vue-Router和Axios，它只是一个非常简单的项目，只有一个JavaScript文件。

index.html的重要部分如下所示：

<div id="app">

    <!-- Navigation -->
    <ul>
        <router-link tag="li" to="/" exact><a>Home</a></router-link>
        <router-link tag="li" to="/category"><a>Category</a></router-link>
    </ul>

    <!-- The Content -->
    <router-view></router-view>

</div>

然后在main.js中，有以下内容：

var VideoList = Vue.component('video-list', {
    props: ['posts'],
    template: '<ul> <li v-for="post in posts"> {{post.id}} </li> </ul>'
});

var router = new VueRouter({
    mode: 'history',
    linkActiveClass: 'active',
    routes: [
        { path: '/', component: VideoList},
        { path: '/category', component: VideoList }
    ]
});

new Vue({
    el: '#app',
    data: {
        posts: []
    },
    router: router,
    created: function() {
        var me = this;
        axios.get( '/wp-json/wp/v2/posts' )
            .then( function(response){
                me.posts = response.data;
            })
        }
});

数据加载来自AJAX调用（我可以记录它等），当我使用Vue devtools附加组件查看它时，它存在于Vue实例上。我只是无法弄清楚如何将数据传递给<video-list>组件。目前我收到一个错误： 数据属性“posts”已被声明为prop。请改用prop默认值。

Answer 1

您可以将道具传递给router-view，就像您对任何其他组件一样。

<router-view :posts="posts" ></router-view>

然后

VideoList可以访问posts。

Answer 2

不是我想要的解决方案，但这似乎已经成功了。将数据直接放到组件上就是在这种特殊情况下工作。

var VideoList = Vue.component('video-list', {
    template: '<ul><li v-for="post in posts"><video-post></video-post></li></ul>',
    data: function() {
        return {
            posts: []
        }
    },
    mounted: function() {
        var me = this;
        axios.get( '/wp-json/wp/v2/posts' )
            .then( function(response){
                me.posts = response.data;
            })
    }
})

如何将AJAX数据从Vue实例传递到组件？

2 个答案: