Question

我在Laravel工作。我想要做的是从服务器获取帖子并在视图中显示它们，但是在此之前，我想设置包含示例帖子的静态数组，但是我的问题是，传递时我无法访问app.js文件中的posts变量由data(){...}发送，并由props: ['posts']接收。当我什至在app.js文件中使用console.log(this.posts)时，它都会返回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>

Answer 1

几乎不需要更改。

App.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组件中。

让我知道这是否对您有用。

Answer 2

您应该在组件（发布）中使用props，以从父组件（应用）接收数据。

vuejs-如何将变量传递到主js文件然后进行迭代？

2 个答案: