Skip to content

vue/no-undef-properties reports invalid issues in functional components (Vue 2) #1669

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
2 tasks done
FloEdelmann opened this issue Oct 21, 2021 · 0 comments · Fixed by #1761
Closed
2 tasks done

vue/no-undef-properties reports invalid issues in functional components (Vue 2) #1669

FloEdelmann opened this issue Oct 21, 2021 · 0 comments · Fixed by #1761

Comments

@FloEdelmann
Copy link
Member

FloEdelmann commented Oct 21, 2021

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.20.0
  • Node version: 14.18.1
  • Operating System: Ubuntu 20.04

Please show your full configuration:

{
  "env": {
    "es6": true,
    "node": true,
  },
  "parserOptions": {
    "ecmaVersion": 2021,
  },
  "plugins": ["vue"],
  "extends": ["eslint:recommended", "plugin:vue/recommended"],
  "rules": {
    "vue/no-undef-properties": "error"
  }
}

What did you do?

<template functional>
  <section
    :ref="data.ref"
    :class="[data.class, data.staticClass, props.name]"
    :style="[data.style, data.staticStyle]"
    v-bind="data.attrs"
    v-on="listeners">
    <div class="label">
      <template v-if="props.label">{{ props.label }}</template>
      <slot name="label" />
    </div>
    <div class="value">
      <template v-if="props.value">{{ props.value }}</template>
      <slot />
    </div>
  </section>
</template>

<script>
/* eslint-disable vue/no-unused-properties -- https://github.com/vuejs/eslint-plugin-vue/issues/1312 */

export default {
  props: {
    name: {
      type: String,
      required: false,
      default: null,
    },
    label: {
      type: String,
      required: false,
      default: null,
    },
    value: {
      type: String,
      required: false,
      default: null,
    },
  },
};
</script>

What did you expect to happen?
No error, since data, props and listeners are part of the functional component context: https://vuejs.org/v2/guide/render-function.html#Functional-Components

What actually happened?

error: 'data' is not defined (vue/no-undef-properties) at ui/components/LabeledValue.vue:3:11:
  1 | <template functional>
  2 |   <section
> 3 |     :ref="data.ref"
    |           ^
  4 |     :class="[data.class, data.staticClass, props.name]"
  5 |     :style="[data.style, data.staticStyle]"
  6 |     v-bind="data.attrs"


error: 'props' is not defined (vue/no-undef-properties) at ui/components/LabeledValue.vue:4:44:
  2 |   <section
  3 |     :ref="data.ref"
> 4 |     :class="[data.class, data.staticClass, props.name]"
    |                                            ^
  5 |     :style="[data.style, data.staticStyle]"
  6 |     v-bind="data.attrs"
  7 |     v-on="listeners">


error: 'listeners' is not defined (vue/no-undef-properties) at ui/components/LabeledValue.vue:7:11:
   5 |     :style="[data.style, data.staticStyle]"
   6 |     v-bind="data.attrs"
>  7 |     v-on="listeners">
     |           ^
   8 |     <div class="label">
   9 |       <template v-if="props.label">{{ props.label }}</template>
  10 |       <slot name="label" />

Repository to reproduce this issue

OpenLightingProject/open-fixture-library@debug-eslint-vue-7.20.0/ui/components/LabeledValue.vue

Note that the ESLint config file there is more elaborate than the minimal example provided in this issue.

Related issue: #1312

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants