Vue js, how to give `this` a type?-CodePudding

I am working on Vue (3.2.13) for the first time, I have worked with typescript.

I am getting this warning. 'this' implicitly has type 'any' because it does not have a type annotation.ts(2683)

In react based environments, all I did was (this as any) and it seemed to work, but here it does not.

<template>
  <component :is="this.$route.meta.layout || 'div'">
    <router-view />
  </component>
</template>

<script lang="ts">
export default {
  name: "App",
};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

How do I properly provide type for <component :is="this.$route.meta.layout || 'div'">

Any help is appreciated!

CodePudding user response：

Inside the template you only need to use "$".

        <h2>{{ $route.params.id }}</h2>