👌
配列やオブジェクトで「vue/require-valid-default-prop」エラーが表示される問題の解決法
Vue3でComposition API形式で開発していたところ、コンポーネントのデフォルト引数が配列の時にeslint-plugin-vueでvue/require-valid-default-propエラーが発生しました
その時の解決法のメモです
<script setup lang="ts">
export interface Props {
test?: string[]
test2?: boolean
test3?: number
test4?: string
}
const props = withDefaults(defineProps<Props>(), {
test: ['test', 'test2'],
test2: true,
test3: 1,
test4: 'test',
})
</script>
<template>
<p>test</p>
</template>
解決法
ファクトリー関数にする
原因・理由
JavaScriptはオブジェクト型は参照渡しになるので、同一のObjectに変更を加えてしまう危険性があるため、ファクトリー関数にすることでその問題を回避しているようです
ファクトリー関数という用語を初めて知ったので、勉強になりました
どこかで自分が間違えてるんだろうなと思いつつ、eslint-plugin-vueにissueを上げてみたらメンテナーの方が丁寧に即レスしてくれたので、自分の恥をここに供養します
Discussion