Vuejs @input="function" は機能しませんが、@input="() => do some" は機能します

Question

匿名関数を HTML 入力コンポーネントの @input フィールドに渡すと機能するのに、まったく同じコードを内部に含む実際の関数を呼び出すと機能しない理由がわかりません。動作しない場合のコードは次のとおりです:

<スクリプトのセットアップ>
'vue' から { ref } をインポートします

const テキスト = ref('')
const 数値文字 = ref(0)
const 数値ワード = ref(0)

関数 count() {
    数値文字 = テキスト.長さ
    numberWords = text.split(' ').filter((e) => e != '').length
}

</スクリプト>

<テンプレート>

<div class="ボックス">
<input v-model="text" placeholder="ここに書き込みます" @input="count"/>
 <p>
     テキスト: {{text}} 

     文字: {{numberChar}} 

     単語: {{numberWords}}
 </p>
</div>

</テンプレート>

しかし、私が単純に言うと:

<input v-model="text" placeholder="ここに書き込みます" @input="() =>numberChar = text.length"/>

numberChar 値が変更され、正しく表示されます。 Vuejs を始めたので何かが足りないのですが、これに 1 時間苦労しています...

Answer 1

皆さん、ありがとうございます。この問題は解決しました。問題は関数に書いた

です

numberChar = text.length

＃＃＃ の代わりに ＃＃＃

numberChar.value = text.value.length

奇妙なことに、私の匿名関数では 

.value

がなくても機能しますが、その理由はわかりません。ここのチュートリアル: https://vuejs.org/tutorial/#step-4彼らは私が使おうとしている方法でそれを使用しています。また、チュートリアルでは、.value は何も指定しない場合は暗黙的であるため不要であるとも述べています。 私の質問のタグとタイトルが間違っているという方は、次回からは改善するよう努めますので、よろしくお願いします。 (これは stackoverflow に関する私の最初の投稿です)

＃＃＃ありがとう：）＃＃＃