how to use Arrow function in a inline event handler [duplicate]

Question

I have this component (vue3+ts)

 <q-input type="number" filled model-value="Model.Code" @update:model-value="val=>console.log(val)" />

i don't understand why I'm getting this error message :

Property 'console' does not exist on type '({ $:
ComponentInternalInstance; $data: {}; $props: Partial<{ [x: number]:
string; } | {}> & Omit<(readonly string[] | Readonly<{ [x: string]:
unknown; } & {} & { [x: string]: Prop<...> | ... 1 more ... |
undefined; }>) & (VNodeProps & ... 2 more ... & Readonly<...>),
never>; ... 10 more ...; $watch(source: string |...'.

what i'm doing wrong ?

Answer 1

console doesn't exist inside <template>.

To log something you need to create a method inside the <script>. For example:

<template>
  <q-input type="number" filled model-value="Model.Code" @update:model-value="clg" />
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const clg = (item: any) => {
      console.log(item);
    };

    return { clg };
  },
});
</script>