如何在内联事件处理程序中使用箭头函数

Question

我有这个组件 (vue3+ts)

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

我不明白为什么会收到此错误消息：

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 |...'.

我做错了什么？

Answer 1

console 在 <template> 中不存在。

为了log你需要在<script>里面创建一个方法。例如：

<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

typescript

vue.js

vuejs3