Expected array got function. Passing function into component vuejs

Question

I am trying to pass a function into my component and I keep getting this error back. "Invalid prop: type check failed for prop "form_type". Expected Array, got Function." My function returns an array so I am a little lost on how to fix this.

The function I am referencing is selectedType & the component in question is 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>

Do you need to call selectedType in created? Maybe try removing it. — Riddhesh Markandeya
– Riddhesh Markandeya, Commented May 16, 2018 at 5:21

Sovalina · Accepted Answer · 2018-05-20 02:14:51Z

1

As you try to call selectedType on click "Submit", maybe you should call it as a method.

Inside selectedType you bind a selectedForms property. Why don't you just initialize this property inside data as an empty array and pass it as a props of your ChildTabs component ?

<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

edited May 20, 2018 at 2:14

answered May 16, 2018 at 9:33

Sovalina

5,6094 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nafiul Islam · Accepted Answer · 2018-05-16 08:50:04Z

1

What you bind as a prop in a component goes as same in the component. So as you're referencing selectedType in your ChildTabs component - the method selectedType will be received by ChildTabs as a prop. So either you edit your propType in ChildTabs component and invoke that passed method as needed or you call the selectedType method on the fly when passed in as a prop like

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

This will call that method then and will bind the resulting array as prop

answered May 16, 2018 at 8:50

Nafiul Islam

1,2208 silver badges20 bronze badges

Collectives™ on Stack Overflow

Expected array got function. Passing function into component vuejs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related