Vue.js property type check failed

Question

I have a Vue component that expects a property of type Array and I am passing an array while using the component. But I am still getting this warning.

[Vue warn]: Invalid prop: type check failed for prop "columns". Expected , got Array.

However the component is working fine and values in columns property are showing as expected.

Update Here's what I am doing

Parent Component

<template>
  <section class="content">
    <div class="row center-block">
      <!-- <h2>Data tables</h2> -->
      <div class="col-md-12">
        <div class="box box-success">
          <!-- <div class="box-header">
            <h3 class="box-title">Data Table With Full Features</h3>
          </div> -->
          <!-- /.box-header -->
          <div class="box-body">

            <datatable :columns="columns" :url="ajax_url"></datatable>

            <!-- /.box-body -->
          </div>
        </div>
      </div>
    </div>
  </section>
</template>


<script>
import datatable from "../partials/datatable"

export default {
  name: 'SubscriberListIndex',
  components: { datatable },
  data () {
    return {
      columns: [
        {label: '#', data: 'id', searchable: true},
        {label: 'List Name', data: 'name', searchable: true},
        {label: 'Type', data: 'type', searchable: true},
        {label: 'Created On', data: 'created_at', searchable: true},
        {
          label: 'Actions',
          data: 'id',
          renderAs: function(ListId) {
            return `<a href="/subscriber-lists/${ListId}" class="btn btn-info btn-xs">edit</a>`
          }
        }
      ],
      ajax_url: '/datatables/subscriber-lists'
    }
  },
  methods: {

  },
  mounted() {

  }
}
</script>
<style>
</style>

datatable component

<template>

<script>

export default {
  name: 'DataTable',
  data () {
    return {
    }
  },
  computed: {
  },
  props: {
    columns: [],
    url: ''
  },
  methods: {
  },
  mounted() {
  }
}
</script>

<style>
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
</style>

Answer 1

You need to define props data type in datatable component

props: {
  columns: {
    type: Array,
    default: []
  }
}