Как передать переменную в основной файл JS, а затем перебрать? - PullRequest
Новая
       5

Как передать переменную в основной файл JS, а затем перебрать?

0 голосов
/ 20 сентября 2018

Я работаю в Ларавеле.Я хочу получить сообщения с сервера и показать их в поле зрения, однако до этого я хотел установить статический массив, содержащий примеры сообщений, но моя проблема в том, что при передаче я не могу получить доступ к переменной posts в файле 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 file: 

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

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

Ответы [ 2 ]

0 голосов
/ 20 сентября 2018

Вы должны использовать props в своем компоненте (Post) для получения данных от родительского компонента (App).

0 голосов
/ 20 сентября 2018

Требуются некоторые изменения.

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.

Дайте мне знать, если это работает для вас.

...