Vue.jsを使用して文字の大きさを動的に変更したい。

Question

Vue.jsを使用して動的に文字の大きさを変更するコードを作成したいと思い、
下記のようなコードを作成しました。
inputの中の値が変更されると、{{message}}の値が変更される動作を期待していたのですが、
現状、inputの大きさを変更するとブラウザ上に"an error occurred"と表示され、
コンソール上には”eventメソッドが見つからない”と表示されております。
どなたかご教示いただけませんでしょうか？

<template>
 <div>
     <h1>Vue.js</h1>
     <p :style="style">{{message}}</p>
     <hr>
     <input type="number" @change="doChange(event);" value="20">
 </div>   
</template>
<script lang="ts">
import { Component,Vue} from 'nuxt-property-decorator'

@Component({})
export default class extends Vue{
    message:string = "Hello Vue!"
    style:string = "font-size:20pt;color:red;"

    doChange(event:any){
        this.style = "font-size:" +event.target.value + "pt;color:red;";
    }
}
</script>

Comments

[stakizawa]

@change="doChange"

だとどうですか？

[takochan1192]

ありがとうございます！できました！！()はいらなかったのですね。

[takochan1192]

回答として出していただければ、解決済みにさせていただきますので、
もしお時間ありましたらよろしくお願いいたします。

Answer 1

@change="doChange(event)" -> @change="doChange"

()はいらなかったのですね。

()がいらないというよりは、渡そうとしている引数名eventが見つからない為にエラーが起こっていた感じですね。