Vue(Nuxt.js)の下記エラーの対処法です。
Type of the default value for '〇〇' prop must be a function
propsのdefalutでのエラー
<script lang="ts">
export default Vue.extend({
props: {
items: {
type: Object,
default: ''
}
}
})
</script>
上記のように、propsで値を受け取る時に、出現するエラーになります。
ObjectやArrayの場合は、関数型で指定する必要がある
Object、Arrayをdefalutに指定する場合は、関数型で指定することでエラーを解消できます。
Object
<script lang="ts">
export default Vue.extend({
props: {
items: {
type: Object,
default: () => {}
}
}
})
</script>
Array
<script lang="ts">
export default Vue.extend({
props: {
items: {
type: Array,
default: () => []
}
}
})
</script>
functionを使っても書けます。
アロー関数ではなく、functionでも書くことができます。
Object
<script lang="ts">
export default Vue.extend({
props: {
items: {
type: Object,
default: function () {
return {}
}
}
}
})
</script>
Array
<script lang="ts">
export default Vue.extend({
props: {
items: {
type: Array,
default: function () {
return []
}
}
}
})
</script>