javascript - Vue 组件绑定(bind)一个数组作为数据

Question

当我尝试将数组绑定(bind)为变量并尝试在子组件中访问此变量时，它说该变量未定义。有没有办法将数组(从 View )传递到组件(使用此数组为数组中的每个项目创建子组件)。

我设法在一个组件中创建了一个循环，并使用这个数组为数组中的每个项目创建了子组件。但是，我想让这个组件动态化，这样它就可以获得一个包含来自父组件的项目的可变数组。

父 View :

<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;
},