Vuejs @input="fungsi" tidak berfungsi tetapi @input="() => lakukan beberapa" berfungsi

Question

Saya tidak faham mengapa apabila saya menghantar fungsi tanpa nama ke medan @input komponen input html saya ia berfungsi, tetapi apabila saya memanggil fungsi sebenar dengan kod yang sama di dalamnya ia tidak berfungsi. Ini ialah kod apabila ia tidak berfungsi:

<script setup>
import { ref } from 'vue'

const text = ref('')
const numberChar = ref(0)
const numberWords = ref(0)

function count() {
    numberChar = text.length
    numberWords = text.split(' ').filter((e) => e != '').length
}

</script>

<template>

<div class="box">
<input v-model="text" placeholder="Write here" @input="count"/>
 <p>
     Text : {{text}} <br>
     Characters : {{numberChar}} <br>
     Words : {{numberWords}}
 </p>
</div>

</template>

Tetapi apabila saya hanya berkata:

<input v-model="text" placeholder="Write here" @input="() => numberChar = text.length"/>

nilainumberChar telah diubah suai dan dipaparkan dengan betul. Saya memulakan Vuejs jadi saya kehilangan sesuatu, tetapi saya telah bergelut dengan ini selama sejam...

Answer 1

Terima kasih semua, saya telah menyelesaikan masalah ini. Masalahnya ialah apa yang saya tulis dalam fungsi

numberChar = text.length

bukannya

numberChar.value = text.value.length

Anehnya, dalam fungsi tanpa nama saya, ia tidak diperlukan tanpa .value 的情况下工作，我不知道为什么。在此处的教程中： https://vuejs.org/tutorial/#step-4他们正在以我尝试使用它的方式使用它。他们也在教程中说 .value kerana ia tersirat jika tiada apa yang dinyatakan?

Bagi mereka yang mengatakan tag dan tajuk soalan saya tidak betul, saya akan cuba lakukan yang lebih baik lain kali, terima kasih. (Ini adalah siaran pertama saya di stackoverflow)

Terima kasih :)