Undefined listeners error on functional component (while working correctly) in Vue 2 with the composition API plugin

3
votes

I got the following errors on a functional component (using the composition API plugin for Vue 2).

[Vue warn]: Property or method "listeners" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

[Vue warn]: Error in data(): "TypeError: can't define property "ob": Object is not extensible"

The strange thing is that the listeners are working as expected... But still throwing the errors. Any idea?

<template functionnal>
  <span
    :class="[ 'tag', { 'little': props.little }]"
    v-on="listeners"
  >
    <slot></slot>
  </span>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api';

export default defineComponent({
  props: {
    little: {
      type: Boolean,
      default: false
    }
  },
  setup(props, { listeners }) {
    return {
      props,
      listeners
    };
  }
});
</script>

<style lang="scss" scoped>
.tag {
  display: flex;
  align-items: center;
  height: 1em;
  padding: 0.6em 0.75em;
  border-radius: 16px;
  font-family: Interstate-Black;
  font-size: 0.90rem;
  color: white;
  background-color: black;
  white-space: nowrap; // do not use a carriage return for long named tags, expand the tags instead

  &.little {
    font-size: 0.75rem;
  }
</style>
1
javascriptvue.jsvuejs2vue-composition-api
In your template, functionnal should be functional. But I still can't reproduce the error you described. Can you update this codesandbox to reproduce the problem? – tony19
@tony19 this solved my problem on the way ! If you want, I can mark it as accepted answer – Lyokolux

1 Answers

2
votes

There's a typo in your template: functionnal should be functional.

Otherwise, your code should work without error, as seen in this codesandbox.