Question

我正在尝试将一个函数传递给我的组件，并且我不断收到此错误。＆＃34;无效道具：对于道具＆＃34; form_type＆＃34;类型检查失败。预期数组，得到功能。＆＃34;我的函数返回一个数组，所以我对如何修复它有点迷失。

我引用的功能是selectedType＆amp;有问题的组件是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

当您尝试在点击＆＃34;提交＆＃34;时尝试拨打selectedType时，您可能应该将其称为方法。

在selectedType内部绑定selectedForms属性。为什么不在数据中将此属性初始化为空数组并将其作为ChildTabs组件的道具传递？

<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

Answer 2

作为组件中的prop绑定的内容与组件中的相同。因此，当您在selectedType组件中引用ChildTabs时，方法selectedType将由ChildTabs作为道具接收。因此，要么在ChildTabs组件中编辑propType并根据需要调用该传递方法，要么在作为支柱传递时动态调用selectedType方法

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

这将调用该方法然后将结果数组绑定为prop

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

2 个答案: