我不明白為什么當我將匿名函式傳遞給我的 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，所以我錯過了一些東西，但是我已經為此苦苦掙扎了一個小時......
uj5u.com熱心網友回復：
謝謝大家，我設法糾正了這個問題。問題是我在我的函式中寫的
numberChar = text.length
代替
numberChar.value = text.value.length
奇怪的是，在我的匿名函式中，它在沒有 的情況下作業.value，我不知道為什么。在這里的教程中：https ://vuejs.org/tutorial/#step-4他們以我嘗試使用它的方式使用它。他們在教程中也說.value沒有必要，因為如果沒有指定，它是隱含的？
對于那些說我的問題的標簽和標題不正確的人，我下次會努力做得更好，謝謝。（這是我在 stackoverflow 上的第一篇文章）
謝謝 ：）
uj5u.com熱心網友回復：
看：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>
uj5u.com熱心網友回復：
我很確定，如果您按下 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/484178.html
標籤：javascript html Vue.js Vuejs3
下一篇：在回圈中制作動態背景顏色