Vuejs @input= "function" 不工作，但 @input= "() => do something"正在工作

Question

我不明白为什么当我传递一个匿名函数到我的html输入组件的@input字段时，它是不工作的，但当我调用一个真正的函数，里面有完全相同的代码。下面是不工作时的代码:

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

但是当我简单地输入这个:

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

numberChar值被正确修改并显示。我正在开始Vuejs，所以我错过了一些东西，但这已经是一个小时了，我正在努力解决这个问题…

Answer 1

谢谢大家，我设法纠正了这个问题。问题是我在函数

中写了

numberChar = text.length

不是

numberChar.value = text.value.length

奇怪的是，在我的匿名函数中，它没有.value而工作，我不知道为什么。在这里的教程:https://vuejs.org/tutorial/#step-4他们使用它的方式，我试图使用它。他们在教程中也说.value不是必需的，因为如果没有指定，它是隐含的?

对于那些说我的问题的标签和标题不正确的人，我下次会尽量做得更好，谢谢。(这是我在stackoverflow上的第一篇文章)

谢谢:)

Answer 2

查看:https://vuejs.org/guide/introduction.html#api-styles

你需要做的是使count在你的组件可见。比如:

<script setup>
... 
export default {
methods: {
count() {
// Your code here.
}
}
}
</script>
<template>
<div class="box">
<input placeholder="Write here" @input="count"/>
...
</div>
</template>

Answer 3

我很确定，如果您按下F12并仔细查看控制台，您会看到错误发生在计数函数中。函数本身已经被称为

您还需要使用.value

访问您的值

<script setup>
import { ref } from 'vue'
const text = ref('')
const numberChar = ref(0)
const numberWords = ref(0)
function count() {
numberChar.value = text.value.length
numberWords.value = text.value.split(' ').filter((e) => e != '').length
}
</script>