Vue组件将数组绑定为数据

Question

当我尝试将数组绑定为变量并尝试在子组件中访问此变量时，它说该变量未定义。有没有一种方法可以将数组（从视图）传递到组件（使用该数组为数组中的每个项目创建子组件）。

我确实设法在组件中创建了一个循环，并使用此数组为数组中的每个项目创建了子组件。但是，我想使此组件动态化，以便它可以从父组件获得包含项的变量数组。

父视图：

<template>
    <div class="choose-method-container">
        <choose-method-component :availablemethods="availablemethods" v-model="availablemethods" v-bind:title="title" v.bind:items_per_row="items_per_row" />
    </div>
</template>


<script>
    import ChooseMethodComponent from 

    '../components/ChooseMethodComponent.vue';

        export default {
            components: {
                ChooseMethodComponent
            },
            methods: {

            },

            data: function() {
                return {
                    title: 'Choose user type',
                    items_per_row: 2,
                    availablemethods: [
                      {title: 'Data',  description: '', route: '/data'},
                      {title: 'Sales & Support',  description: '', route: '/sales'},      
                    ]
                }
            },
    </script>

子组件

<template>
    <div class="choose-method-inner-container">
        <div class="card-container row flexbox" v-for="chunk in productChunks">
            <stepcard-component v-for="step_card in chunk" class="step-card"
                v-bind:key="step_card.value"
                v-bind:title="step_card.title"
                v-bind:description="step_card.description"
                v-bind:name="step_card.name"
                v-bind:value="step_card.value"
                v-bind:view="step_card.view"
                >
            </stepcard-component>
        </div>


        <div class="button-container right">
            <button type="submit" class="btn waves-effect waves-light" :disabled="choose_method_disabled"  v-on:click="choose_method">
                Choose method
            </button>
        </div>
    </div>
</template>


<script>
    import lodash from 'lodash';
    import StepCard from './StepCard.vue';

    export default {
        components: {
            StepCard
        },

        data: function() {
            return {
                choose_method_disabled: true,
            }
        }, 

        mounted() {

              console.log('mounted methods', {availablemethods: this.availablemethods, title:this.title});
            this.productChunks();
        },


            computed: {

            },

            props: {
                availablemethods: Array,
            },

            methods: {
                choose_method: function() {
                    console.log('choose_method', this.method_view);
                    if(!this.method_view)
                        return;

                        this.$router.push({name: this.method_view});
                },

                productChunks() {
                    console.log('methods', this.availablemethods);
                    if(!this.availablemethods){
                        console.log('self', {self:this});
                        return;
                    }
                    var methods = this.availablemethods.forEach(function(method, index){
                        if(!method.name)
                            method.name= '';

                        if(!method.view)
                            method.view= '';

                        if(!method.value)
                            method.value= '';

                        if(!method.description)
                            method.description= '';

                        if(!method.title)
                            method.title= '';

                        return method;
                    });            
                    let chunks = lodash.chunk(methods, this.items_per_row);
                    console.log('productChunks', {chunks:chunks});
                    return chunks;
                }
            }
        }
    </script>

我希望访问子组件中的可用方法，但是它记录未定义。有什么方法可以成功传递数组（无需在子级中声明和设置数组数据）。

Answer 1

我认为您的问题实际上与您的var methods = this.availablemethods.forEach()有关，它返回的methods未定义。

尝试重组以下内容（未经测试）

productChunks() {
      let methods = [];
      this.availablemethods.forEach((method, index) => {
                    if(!method.name)
                        method.name= '';

                    if(!method.view)
                        method.view= '';

                    if(!method.value)
                        method.value= '';

                    if(!method.description)
                        method.description= '';

                    if(!method.title)
                        method.title= '';

                     methods.push(method);

                });

                let chunks = lodash.chunk(methods, this.items_per_row);
                return chunks;
},