预期的数组得到了功能。将函数传递给组件vuejs

Question

我正在尝试将一个函数传递到我的组件中，但我一直收到此错误。 "Invalid prop: type check failed for prop "form_type”。期望数组，得到函数。我的函数 returns 是一个数组，所以我对如何解决这个问题有点迷茫。

我引用的函数是 selectedType，相关组件是 ChildTab

    <template>
        <div class="row">
                        <q-field
                            label="Contact Type"
                            :labelWidth="3"
                            error-label="Please select a contact type"
                            :error="!!failed_validations.contact_type"
                        >
                            <q-select v-model="contact_type" :options="contact_types"/>
                        </q-field>
                </div>


                <ChildTabs
                    :form_type="selectedType"
                />

                <q-field class="float-right">
                    <q-btn color="faded" v-on:click="goBack()">Cancel</q-btn>
                    <q-btn color="green-6" v-on:click="selectedType()">Submit</q-btn>
                </q-field>
            </div>
        </div>
    </template>

    <script>
      'use strict';

      import ChildTabs from '../tabs';

      export default {
        name: 'contacts-view',
        data: function () {
            return {
                contact_type: '',
                contact_types: [
                    {
                        label: 'Pregnancy',
                        value: 'pregnancy',
                        form_type: [
                            'BreastFeeding',
                            'Pregnancy'
                        ]
                    },
                    {
                        label: 'Post Partum (Includes Birth)',
                        value: 'postpartum',
                        form_type: [
                            'Birth',
                            'BreastFeeding',
                            'PostPartum'
                        ]
                    },
                    {
                        label: '1 - 2 Month',
                        value: '1_2_months',
                        form_type: [
                            'BreastFeeding',
                            'DuoMonths'
                        ]
                    },
                    {
                        label: '6 Month',
                        value: '6_months',
                        form_type: [
                            'SixMonth'
                        ]
                    }
                ],
            }
        },

        props: {

        },

        computed: {
            selectedType: function ()
        {
            var values = this.contact_types.map(function(o) { return o.value });
            var index = values.indexOf(this.contact_type);
            this.selectedForms = this.contact_types[index].form_type
//            console.log(this.selectedForms);
            return this.selectedForms;
        }
        },
        methods: {

        },

        created: function () {
            this.selectedType();
        },

        components: {
            ChildTabs
        }
    }
    </script>

Answer 1

你在组件中作为 prop 绑定的东西在组件中也是一样的。因此，当您在 ChildTabs 组件中引用 selectedType 时，selectedType 方法将作为 prop 被 ChildTabs 接收。因此，您要么在 ChildTabs 组件中编辑 propType 并根据需要调用该传递的方法，要么在作为道具传入时即时调用 selectedType 方法

<ChildTabs :form_type="selectedType()" />

这将调用该方法并将生成的数组绑定为 prop

Answer 2

当您尝试在单击 "Submit" 时调用 selectedType 时，也许您应该将其作为方法调用。

在 selectedType 中绑定一个 selectedForms 属性。为什么不将这个属性 inside data 初始化为空数组并将其作为 ChildTabs 组件的 props 传递？

<template>
  <div class="row">
    <ChildTabs :form_type="selectedForms" />
  </div>
</template>

export default {
  name: 'contacts-view',
  data: function () {
    return {
      selectedForms: [],
      // ...
    }
  },
  methods: {
    selectedType() {
      var values = this.contact_types.map(function(o) { return o.value });
      var index = values.indexOf(this.contact_type);
      this.selectedForms = this.contact_types[index].form_type
    }
  },
  //...
}

Fiddle example

预期的数组得到了功能。将函数传递给组件vuejs

Expected array got function. Passing function into component vuejs

vue.js

vue-component