CODEWITHSUNDEEP
vue.jsvuejs2vue-component
parsecer
parsecer

Reputation: 5176

Vue: Invalid prop: type check failed for prop . Expected Array, got String with value

I'm trying to pass array of strings as a prop to a child component, but get

Vue: Invalid prop: type check failed for prop . Expected Array, got String with value

error.

Using that component:

<template>
  <GenericForm title = "Sign Up" button-text= "Sign Up"
               fields="['Username', 'Email', 'Password']"/>
</template>

I'm not sure what I'm doing wrong. I tried to search, but couldn't find an example that passes array as a prop inside <template> tag.

EDIT:

Parent component:

<template>
  <form 

      class = "signup-form   rounded-lg
              p-10 m-auto  align-middle content-center
              space-y-6
              flex flex-col  items-center justify-center
                ">
    <div class="title-text light-text text-xl" >Signup</div>

<li v-for="(field, index) in fields">
       {{ field.placeholder }}
    </li>

&lt;!&ndash;   <FormField placeholder="Username"/>

    <FormField placeholder="Email"/>

    <FormField placeholder="Password"/>

    <GenericButton :text  = "buttonText"/>&ndash;&gt;
  </form>
</template>


<script>

import ArticleList from "../../components/articles/ArticleList";
import FormField from "@/components/other/FormField";
import GenericButton from "@/components/buttons/GenericButton";

export default {
  components: {GenericButton, FormField, ArticleList},

  props: {
    title: {
      type: String,
      required: true
    },
    fields:  {
      type: Array,
      required: true
    },
    buttonText: {
      type: String,
      required: true
    }
  }
}
</script>

EDIT2:

I also realized the error goes away when I put : in front of fields in child component:

<template>
  <GenericForm title = "Sign Up" button-text= "Sign Up"
               :fields="['Username', 'Email', 'Password']"/>
</template>

But dispite there being no error, the fields don't get listed on the page.

Upvotes: 1

Views: 3764

Answers (1)

S.Visser
S.Visser

Reputation: 4735

First error you caught yourself, you need to add an : before the prop because else Vue does not process it and thinks it a string.

The second error is because you use:

<li v-for="(field, index) in fields">
  {{ field.placeholder }}
</li>

Placeholder does not exist in your array. Just field is enough and should output the values.

Upvotes: 2

Related Questions