无效的 prop：VueJS 中的类型检查失败错误

Question

我正在尝试使用名为 CardRenderer.vue 的组件，它使用对象数组渲染卡片。我一次又一次地使用相同的组件来渲染数据。当我尝试从组件传递 prop 时，出现此错误“[Vue warn]: Invalid prop: type check failed for prop "renderData"。

我尝试传递不同的值和不同的类型，但它不起作用。

这是代码：

CardRenderer.vue

<template lang="html">

  <div>       
    <b-container class="bv-example-row">      
       <b-row v-for="(row, i) of rows" v-bind:key="i">       
          <b-col v-for="(item, j) of row" v-bind:key="j" >

                    <!-- you card -->
              <b-card 
                :title="item.title" 
                img-src="item.icon" 
                img-alt="Image" 
                img-top 
                tag="article" 
                style="max-width: 20rem;" 
                class="mb-2"
              >
                <b-card-text>
                  <h1>{{item.name}}</h1>
                  <pre>{{item.description}}</pre>
                </b-card-text>
                  <b-button :href="'/dashboard/'+item.name" variant="primary">More</b-button>
              </b-card>                
          </b-col>
        </b-row>
    </b-container>    
  </div>

</template>

<script lang="js">
  export default  {
    name: 'CardRenderer',
    props: {
      renderData: []
    },
     data() {
      return {
        rows: null
      }
    },
    mounted() {

      const itemsPerRow = 3
      let rowss = []
      let arr = this.renderData
      // eslint-disable-next-line
      // console.log(this.renderData)
      for (let i = 0; i < arr.length; i += itemsPerRow){
          let row = []
          for (let z = 0; z < itemsPerRow; z++) {
            row.push(arr[z])
          }
          rowss.push(row)
      }


      this.rows = rowss

      // eslint-disable-next-line                
      console.log(this.rows) 

    },

    methods: {

    },
    computed: {
      //  rows() {
      //  }

    }
  }
</script>

<style scoped>

</style>

CardGrouper.vue：

<template lang="html">

  <div  class = "full" >

    <div class="h-50" style=" background-color: #C8544F">
      <h1 align="center">{{$store.getters.responseAPI.title}} </h1>

      <CardRenderer :renderData=this.$store.getters.responseAPI.apps />
    </div>

  </div>

</template>

<script>
import CardRenderer from "./CardRenderer.vue"
/* eslint-disable */
  export default  {
    name: 'CardGrouper',
    components: {
      CardRenderer
    },
    props: [],
    mounted() {

    },
    data() {
      return {

      }
    },
    methods: {

    },
    computed: {

    }
}
</script>

<style scoped >
  .full{
    width: 100vw;
    height: 90vh;
    background: linear-gradient(to bottom, Red 30%, white 50%);
}
</style>

一些东西.vue

<template lang="html">
    <!-- <h1>Something</h1> -->
    <CardRenderer :renderData=valObj />
</template>

<script lang="js">
import CardRenderer from './CardRenderer'

    export default  {
        name: 'something',
        components: {
            CardRenderer
        },
        props: [],

        data() {
            return {
                valObj: []
            }
        },
        mounted() {
            let key = this.findUrl()
            let value = this.$store.getters.responseAPI.apps.filter((elem) => {
                if(elem.name == key) return elem.apps
            })

            if (value.length > 0)
                this.valObj = value[0].apps
            //eslint-disable-next-line
            console.log(this.valObj)
        },
        methods: {
            findUrl() {
                let url  = window.location.pathname.split("/").slice(-1)[0];
                return url
            }       
        },
        computed: {

        }
    }
</script>

<style scoped >
  .something {

  }
</style>

我遇到了这个错误。 看起来像这样。

这是我作为道具传递的数据

Something.vue

这就是

value

的样子

从

Something.vue

某处生成错误。 我将对象数组作为道具传递。 我该如何纠正这个错误，使其工作。

Answer 1

将

renderData

类型设置为

Array

，默认值设置为

[]

:

props: {
  renderData: {
    type: Array,
    default: () => []
  }
}

Answer 2

看来您正在将

renderData

prop 定义为数组

[]

但可能正在向其传递一个对象或其他东西。

要么简化它并做...

props: ['renderData']

或者如果你要传递一个对象给它......

    props: {
         renderData: {
            type: Object,
          }
     }

如果它是一个对象数组，那么..

 props: {
     renderData: {
        type: Array,
        default: () => [{}];
      }

Answer 3

仅供医生使用。

    // Object with a default value
propE: {
  type: Object,
  // Object or array defaults must be returned from
  // a factory function
  default: function () {
    return { message: 'hello' }
  }
},

这是在 vue prop 文档中