this object should not be used in the Vue setup function

  • VUE_SETUP_INVALID_THIS
  • Error
  • Medium
  • vue

This rule applies when this object is used in the setup function of a Vue component.

this is bound to an undefined value in the setup function unlike the this object of other component options, which represents the component instance. Accessing properties of this in setup() will result in a TypeError exception.

Noncompliant Code Example

View with compliant examples side by side
<script>
export default {
  props: ["foo"],
  setup() {
    console.log("foo: " + this.foo); // VUE_SETUP_INVALID_THIS alarm
    return {};
  }
}
</script>

Compliant Code Example

View with noncompliant examples side by side
<script>
export default {
  props: ["foo"],
  setup(props) {
    console.log("foo: " + props.foo);
    return {};
  }
}
</script>

Version

This rule was introduced in DeepScan 1.42.0.

See

Was this documentation helpful?