javascript - vuejs - 如何将变量传递给主 js 文件然后迭代？

Question

我在 Laravel 工作。我想要做的是从服务器获取帖子并将它们显示在视图中，但是在此之前我想设置包含示例帖子的静态数组，但我的问题是我在传递时无法访问 app.js 文件中的帖子变量由data(){...}和 接收props: ['posts']。当我什console.log(this.posts)至在 app.js 文件中时，它返回undefined. 我很困惑问题是什么：

我的资源/js/app.js 文件：

window.Vue = require('vue');
window.App = require('./App.vue');
window.addEventListener('load', function ()
{
    const app = new Vue({
        el: '#app',
        render: h => h(App)
    });
});

我的资源/js/App.vue 文件：

<template>
    <div>
        <app-head></app-head>
        <app-post v-for="post in posts" :key="post.id"></app-post>
        <app-foot></app-foot>
    </div>
</template>

<script>
    import Head from './components/Head.vue';
    import Foot from './components/Foot.vue';
    import Post from './components/Post.vue';

    export default {
        props: ['posts'],
        components: {
            'app-head': Head,
            'app-post': Post,
            'app-foot': Foot,
        }
    }
</script>

我的资源/js/components/Post.vue 文件：

<template>
    <div class="post">
        // The post content...
    </div>
</template>

<script>
    export default {
        data() {
            return {
                posts: [
                    {id: 1, title: 'Hello :)'}
                ]
            }
        }
    }
</script>

标签： javascriptlaravelvue.jsparameter-passing

Answer 1

很少需要改动。

应用程序.vue

<template>
    <div>
        <app-head></app-head>
        <app-post :posts="posts"></app-post>
        <app-foot></app-foot>
    </div>
</template>

<script>
    import Head from './components/Head.vue';
    import Foot from './components/Foot.vue';
    import Post from './components/Post.vue';

    export default {

        components: {
            'app-head': Head,
            'app-post': Post,
            'app-foot': Foot,
        }, 
        data() {
            return {
                posts: [
                    {id: 1, title: 'Hello :)'}
                ]
            }
        }
    }
</script>

如果您需要将帖子列表支持到组件，那么它必须来自这里。因此，通知data被修改（或插入）。

Post.vue

<template>
    <div class="post" v-for="post in posts" :key="post.id">
        // The post content...
    </div>
</template>

<script>
    export default {
        props: ['posts']
    }
</script>

请注意 v-for 应该在post组件中。

让我知道这是否适合你。