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 inside the setup function unlike the this object of other component options, which represents the component instance. Accessing its properties will result in a TypeError exception.

This rule also applies to <script setup> which is compiled into the setup function.

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?