Skip to content

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

Closed
@FloEdelmann

Description

@FloEdelmann

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

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