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

【问题标题】：vuejs - How to pass variable to main js file and then iterate through?vuejs - 如何将变量传递给主 js 文件然后迭代？
【发布时间】：2018-09-20 06:26:23
【问题描述】：

我在 Laravel 工作。我想要做的是从服务器获取帖子并将它们显示在视图中，但是在此之前我想设置包含示例帖子的静态数组，但我的问题是我在传递时无法访问 app.js 文件中的帖子变量由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>

【问题讨论】：

你把它互换了。请在下面查看我的答案，让我知道它是否有效。

标签： javascript laravel vue.js parameter-passing

【解决方案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 组件中。

让我知道这是否适合您。

【讨论】：

我知道在模板中我们不应该遍历数组，因为它只是一个模板，而是在导入组件的地方使用它。不，它不起作用:(顺便说一句，标签是 app-head、app-foot 和 app-post。这是我的一个错误。
@kodfire 你能澄清什么没用吗？ v-for 用于在模板中进行迭代。我没有完全理解你上面的评论。
您能否将app-head 更改为nufa-head，如components 部分中所述。您可能还想将app-post 更新为nufa-post 和app-foot 更新为nufa-foot。更新答案。
我刚刚在我的文件中复制了您所说的内容，但它引发了错误。如何获取错误内容以将其转储到此处？问题在于 `v-for="post in posts" :key="post.id"` 当我删除这部分时它返回 Build successful。
我当然做到了。我告诉过你我已经编辑了代码，所以改变了你的答案。再次感谢。

【解决方案2】：

你应该在你的组件（Post）中使用props从父组件（App）接收数据。

【讨论】：