[Vuejs]-Expected array got function. Passing function into component vuejs

by

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

👤Sovalina

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

👤Nafiul Islam

Leave a comment