Closed
Description
Checklist
- I have tried restarting my IDE and the issue persists.
- I have read the FAQ and my problem is not listed.
Tell us about your environment
- ESLint version: ^7.32.0
- eslint-plugin-vue version: ^7.18.0
- Node version: v14.17.0
- Operating System: win 10
Please show your full configuration:
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/vue3-recommended',
'eslint:recommended',
'@vue/typescript/recommended',
'@vue/airbnb',
'@vue/prettier',
'@vue/prettier/@typescript-eslint',
],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
'@typescript-eslint/comma-dangle': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/indent': 'off',
'@typescript-eslint/member-ordering': 'off',
'@typescript-eslint/no-unused-vars': [
'warn',
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
},
],
'@typescript-eslint/no-use-before-define': 'error',
'class-methods-use-this': 'off',
'function-paren-newline': 'off',
'id-blacklist': 'off',
'implicit-arrow-linebreak': 'off',
'import/no-cycle': [
2,
{
maxDepth: 1,
},
],
'import/no-dynamic-require': 'off',
'import/no-extraneous-dependencies': 'off',
'import/no-unresolved': 'off',
'import/prefer-default-export': 'off',
'lines-between-class-members': 'off',
'max-len': 'off',
'no-confusing-arrow': 'off',
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-plusplus': [
'error',
{
allowForLoopAfterthoughts: true,
},
],
'no-restricted-syntax': 'off',
'no-spaced-func': 'off',
'no-use-before-define': 'off',
'object-curly-newline': 'off',
'object-shorthand': [
'error',
'always',
{
avoidExplicitReturnArrows: true,
},
],
'operator-linebreak': 'off',
'vue/block-lang': [
'error',
{
script: {
lang: 'ts',
},
},
],
'vue/html-closing-bracket-newline': [
'error',
{
multiline: 'always',
singleline: 'never',
},
],
'vue/html-self-closing': [
'error',
{
html: {
component: 'always',
normal: 'always',
void: 'always',
},
math: 'always',
svg: 'always',
},
],
'vue/new-line-between-multi-line-property': 'error',
'vue/no-bare-strings-in-template': [
'error',
{
allowlist: [
'(',
')',
',',
'.',
'&',
'+',
'-',
'=',
'*',
'/',
'#',
'%',
'!',
'?',
':',
'[',
']',
'{',
'}',
'<',
'>',
'\u00b7',
'\u2022',
'\u2010',
'\u2013',
'\u2014',
'\u2212',
'|',
],
attributes: {
'/.+/': [
'title',
'aria-label',
'aria-placeholder',
'aria-roledescription',
'aria-valuetext',
],
input: ['placeholder'],
},
directives: ['v-text'],
},
],
'vue/no-duplicate-attr-inheritance': 'error',
'vue/no-multiple-objects-in-class': 'error',
'vue/no-parsing-error': [
2,
{
'invalid-first-character-of-tag-name': false,
},
],
'vue/no-potential-component-option-typo': 'error',
'vue/no-template-target-blank': 'error',
'vue/no-unregistered-components': 'error',
'vue/no-unused-properties': [
'warn',
{
groups: ['props', 'data', 'computed', 'methods', 'setup'],
},
],
'vue/no-unused-refs': 'error',
'vue/no-useless-v-bind': 'error',
'vue/padding-line-between-blocks': 'error',
'vue/v-for-delimiter-style': ['error', 'of'],
'vue/v-on-function-call': [
'error',
'never',
{
ignoreIncludesComment: false,
},
],
},
overrides: [
{
files: [
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)',
],
env: {
jest: true,
},
},
{
files: ['*.html'],
processor: 'vue/.vue',
},
],
};What did you do?
<template>
<span v-for="(item, index) of pages" :key="index" @click="changePage(item)">
{{ item }}
</span>
</template>
<script setup lang="ts">
import {
computed,
defineProps,
toRefs,
withDefaults,
defineEmits,
ComputedRef,
} from 'vue';
import { getPagesOnPagination } from '@/libs/pagination';
const props = withDefaults(
defineProps<{
currentPage: number;
totalRows: number;
rowsPerPage: number;
}>(),
{
currentPage: 1,
totalRows: 100,
rowsPerPage: 10,
}
);
const { currentPage, totalRows, rowsPerPage } = toRefs(props);
const totalPages = computed(() =>
Math.ceil(totalRows.value / rowsPerPage.value)
);
const pages: ComputedRef<(number | '...')[]> = computed(() =>
getPagesOnPagination(currentPage.value, totalPages.value)
);
const emit = defineEmits<{
(e: 'changePage', page: number): void;
}>();
function changePage(page: number | '...') {
if (page === '...') {
return;
}
emit('changePage', page);
}
</script>
<style lang="scss" scoped>
//
</style>
What did you expect to happen?
I use all props from the api defineProps in the api computed.
Error from 'vue/no-unused-properties' should not happen.
What actually happened?
warning: 'currentPage' of property found, but never used (vue/no-unused-properties) at src\components\Pagination.vue:18:5:
16 | const props = withDefaults(
17 | defineProps<{
> 18 | currentPage: number;
| ^
19 | totalRows: number;
20 | rowsPerPage: number;
21 | }>(),
warning: 'totalRows' of property found, but never used (vue/no-unused-properties) at src\components\Pagination.vue:19:5:
17 | defineProps<{
18 | currentPage: number;
> 19 | totalRows: number;
| ^
20 | rowsPerPage: number;
21 | }>(),
22 | {
warning: 'rowsPerPage' of property found, but never used (vue/no-unused-properties) at src\components\Pagination.vue:20:5:
18 | currentPage: number;
19 | totalRows: number;
> 20 | rowsPerPage: number;
| ^
21 | }>(),
22 | {
23 | currentPage: 1,Repository to reproduce this issue