how to use Arrow function in a inline event handler

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 ?

Did you tried [this one](https://stackoverflow.com/a/60240938/8816585)? — kissu, May 13 '22 at 08:54
@kissu i did , this.console.log gives the error ( object is possible undefined ) and this?console.log gives ( property console does not exist on type never ) — lzaek, May 13 '22 at 08:58
Alright, the rest is how to type a `console.log` properly so. I don't know TS, cannot help. — kissu, May 13 '22 at 09:00

score 2 · Accepted Answer · edited May 13 '22 at 09:05

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>

how to use Arrow function in a inline event handler

1 Answers1