Invalid prop: type check failed for prop "list". Expected Array, got Object
来源:7-6 使用vuex action 发送异步请求
慕娘7565075
2021-09-02
ColumnList.vue中
<template>
<div class="row">
<div v-for="column in list" :key="column._id" class="col-4 mb-4">
<div class="card h-100 shadow-sm">
<div class="card-body text-center">
<img :src="column.avatar && column.avatar.url" :alt="column.title" class="rounded-circle border border-light w-25 my-3" >
<h5 class="card-title">{{column.title}}</h5>
<p class="card-text text-left">{{column.description}}</p>
<router-link :to="`/column/${column._id}`" class="btn btn-outline-primary">进入专栏</router-link>
</div>
</div>
</div>
</div>
</template>
export default defineComponent({
name: 'ColumnList',
props: {
list: {
type: Array as PropType<ColumnProps[]>,
required: true
}
},
setup (props) {
console.log(props.list)
const columnList = computed(() => {
return props.list.map(column => {
if (!column.avatar) {
column.avatar = {
url: require('@/assets/column.jpg')
}
} else {
column.avatar.url = column.avatar.url + '?x-oss-process=image/resize,m_pad,h_50,w_50'
}
return column
})
})
return {
columnList
}
}
})
template哪里直接写list就是对的,但是如果用columnList就不对
Invalid prop: type check failed for prop “list”. Expected Array, got Object
但是Home传过来的类型就是数组
</section>
<h4 class="font-weight-bold text-center">发现精彩</h4>
<column-list :list="list"></column-list>
</div>
</template>
<script lang="ts">
import { defineComponent, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import { GlobalDataProps } from '@/store'
import ColumnList from '../components/ColumnList.vue'
export default defineComponent({
name: 'Home',
components: {
ColumnList
},
setup () {
const store = useStore<GlobalDataProps>()
onMounted(() => {
store.dispatch('fetchColumns')
})
const list = computed(() => store.state.columns)
const biggerColumnLen = computed(() => store.getters.biggerColumnsLen)
return {
list: list
}
}
})
</script>
麻烦老师解答一下
写回答
1回答
-
慕娘7565075
提问者
2021-09-02
问题已解决,源于自己太蠢。。。。。。
012021-09-02
相似问题