eslint-plugin-vue icon indicating copy to clipboard operation
eslint-plugin-vue copied to clipboard

vue/require-valid-default-prop false positive on arrays with props destructure assignment

Open aethr opened this issue 4 months ago • 0 comments

Checklist

  • [x] I have tried restarting my IDE and the issue persists.
  • [x] I have read the FAQ and my problem is not listed.

Tell us about your environment

  • ESLint version: 8.50.0
  • eslint-plugin-vue version: 9.29.0
  • Vue version: 3.5.0
  • Node version:
  • Operating System:

Please show your full configuration:

module.exports = {
  parser: 'vue-eslint-parser',

  parserOptions: {
    parser: '@typescript-eslint/parser',
  },

  extends: ['plugin:vue/base'],

  rules: {
    'vue/require-valid-default-prop': 'error',
  },
};

What did you do?

<template>
  <div></div>
</template>

<script lang="ts" setup>
const {
  example = [],
} = defineProps<{
  example?: number[];
}>();
</script>

What did you expect to happen?

When assigning default values to props via props destructuring, arrays do not need to be generated by a function, and probably the same with objects. The vue documentation on props destructuring includes an example: https://vuejs.org/api/sfc-script-setup.html#reactive-props-destructure

I expected example = [] not to trigger the vue/require-valid-default-prop rule error.

What actually happened?

/home/projects/stackblitz-starters-reg1dy/test.vue
  8:19  error  Type of the default value for 'example' prop must be a function  vue/require-valid-default-prop

✖ 1 problem (1 error, 0 warnings)

Repository to reproduce this issue

https://stackblitz.com/edit/stackblitz-starters-qm6de7?file=test.vue

aethr avatar Oct 16 '24 00:10 aethr