CODEWITHSUNDEEP
vue.js
drake035
drake035

Reputation: 2877

Why do I get this "Invalid prop: expected Array, got String" error?

In my child component I expect an array prop:

export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  }
}

In my parent component I define an array of objects:

data () {
  return {
    listItems: [
      {
        text: 'blabla'
      },
      {
        text: 'blibli'
      }
    ]
  }
}

..and call the child component this way:

<custom-list items="listItems" />

Yet Vue complains that listItems is a string. How can it be a string?

Upvotes: 1

Views: 4888

Answers (1)

Jns
Jns

Reputation: 3257

With <custom-list items="listItems" /> you are just passing a static string. You have to change it to v-bind:items or in short form :items to pass the array to your component. The v-bind colon in front is used to tell vue that the value being passed is a javascript expression or a data type other than a string.

For example: <custom-list :items="listItems" /> or <custom-list v-bind:items="listItems" />

Upvotes: 2

Related Questions