Vuejs @input="function" ne fonctionne pas mais @input="() => do some" fonctionne

Question

Je ne comprends pas pourquoi lorsque je passe une fonction anonyme au champ @input de mon composant d'entrée HTML, cela fonctionne, mais lorsque j'appelle la vraie fonction avec exactement le même code à l'intérieur, cela ne fonctionne pas. Voici le code quand ça ne marche pas :

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

Mais quand je dis simplement :

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

La valeur

numberChar a été modifiée et affichée correctement. Je démarre Vuejs donc il me manque quelque chose, mais j'ai du mal avec ça depuis une heure...

Answer 1

Merci à tous, j'ai résolu ce problème. Le problème c'est ce que j'ai écrit dans la fonction

numberChar = text.length

au lieu de

numberChar.value = text.value.length

Etrangement, dans ma fonction anonyme, ce n'est pas obligatoire sans le .value 的情况下工作，我不知道为什么。在此处的教程中： https://vuejs.org/tutorial/#step-4他们正在以我尝试使用它的方式使用它。他们也在教程中说 .value car c'est implicite si rien n'est précisé ?

Pour ceux qui ont dit que les tags et les titres de mes questions étaient incorrects, j'essaierai de faire mieux la prochaine fois, merci. (C'est mon premier article sur stackoverflow)

Merci :)