Question

我有一个Vue组件，它期望使用Array类型的属性，并且在使用该组件时传递了一个数组。但是我仍然收到此警告。

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

但是该组件运行正常，并且column属性中的值按预期显示。

更新这就是我在做什么

父组件

<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>

数据表组件

<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

您需要在数据表组件中定义props数据类型

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

Vue.js属性类型检查失败

1 个答案: