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: 6.8.0
- eslint-plugin-vue version: 7.8.0
- Node version: 14.8.0
- Operating System: Ubuntu 20.04.1 LTS
Please show your full configuration:
I'm using the Vue CLI default configuration for Vue 3 projects. Below is from my package.json:
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
What did you do?
I wrote a default function for the prop printMessage
. In the default function, I called this
to access the prop values.
// main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App, { message: 'Hello there!' }).mount('#app')
// App.vue
<template>
<button @click="printMessage">Print message</button>
</template>
<script>
export default {
name: 'App',
props: {
message: String,
printMessage: {
type: Function,
default() {
console.log(this.message);
}
}
}
}
</script>
What did you expect to happen?
eslint should not throw the no-deprecated-props-default-this error because default functions of props with type: Function
do have access to this
.
What actually happened?
eslint threw the no-deprecated-props-default-this error.
error: Props default value factory functions no longer have access to `this` (vue/no-deprecated-props-default-this) at src/App.vue:14:21:
12 | type: Function,
13 | default() {
> 14 | console.log(this.message);
| ^
15 | }
16 | }
17 | }
I think the problem is that the default function is being treated as if it is a factory function for a prop of type: Object
, since factory functions do not have access to this
. But default functions for props of type: Function
do have access to this
, as shown by clicking the button in my example and seeing that the message is printed in the console.
Repository to reproduce this issue
https://github.com/emccorson/issue_no-deprecated-props-default-this