Как передать значения в дочерний компонент vue и цикл? - PullRequest
Новая
       16

Как передать значения в дочерний компонент vue и цикл?

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

Я использую Axios Call для получения значений из API.Я хочу выбрать компоненты Home и ListItem.Я хочу 

<template>
    <div>
            <list-item v-for="idea in ideaList" :key="idea.id"></list-item>
    </div>
</template>
<script>
    import ListItem from '../components/ListItem'
    let AddIdea = require('../components/AddIdea.vue');
    export default {
        name: "HomePage",
        components: {AddIdea, ListItem},
        data() {
            return {
                addActive: "",
                ideaList: {},
                errors: {},
            }
        },
        mounted() {
            axios.post('/getData')
                .then((response) => this.ideaList = response.data)
                .catch((error) => this.errors = error.response.data);
        },
    }
</script>

Как передать мои значения IdeaList в мой компонент ListItem?И отображать их хоть петлей.Где мне чего-то не хватает?Я попытался вставить реквизит, как это: 

<script>
export default {
    name: "ListItem",
    data() {
        return {
            props: ['idea']
        }
    }
}

и отображаемое значение: 

<template>
<span class="column is-8">
    {{idea.title}}
</span></template>

Где искать, как это сделать?

1 Ответ

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

Я не уверен, хотите ли вы передать ideaList или просто повторный объект в ListItem, но здесь есть две очевидные ошибки.

Вы забыли объявить реквизит, который хотите передатьдля ListItem

<list-item v-for="idea in ideaList" :key="idea.id" :idea="idea"></list-item>

В ListItem компоненте не следует объявлять реквизиты внутри data object 

export default {
    name: "ListItem",
    props: ["idea"]
}
...