Skip to content

no-deprecated-props-default-this is thrown for props of type Function #1464

Closed
@emccorson

Description

@emccorson

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions