我不明白為什麼當我將匿名函數傳遞給我的 html 輸入組件的 @input 字段時它起作用,但是當我調用內部具有完全相同代碼的真實函數時它不起作用。這是不工作時的程式碼:
<script setup> import { ref } 從 '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,所以我錯過了一些東西,但我已經為此苦苦掙扎了一個小時......
謝謝大家,我已經解決了這個問題。問題是我在函數中寫的
#而不是 numberChar.value = text.value.length奇怪的是,在我的匿名函數中,它在沒有
.value 的情況下工作,我不知道為什麼。在此處的教程中: https://vuejs.org/tutorial/#step-4他們正在以我嘗試使用它的方式使用它。他們也在教程中說
.value