Vuejs @input="function" 不起作用,但 @input="() => do some" 正在起作用
P粉659518294
P粉659518294 2024-03-19 19:11:59
0
1
323

我不明白為什麼當我將匿名函數傳遞給我的 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,所以我錯過了一些東西,但我已經為此苦苦掙扎了一個小時......

P粉659518294
P粉659518294

全部回覆(1)
P粉459440991

謝謝大家,我已經解決了這個問題。問題是我在函數中寫的

numberChar = text.length

#而不是
numberChar.value = text.value.length

奇怪的是,在我的匿名函數中,它在沒有 .value 的情況下工作,我不知道為什麼。在此處的教程中: https://vuejs.org/tutorial/#step-4他們正在以我嘗試使用它的方式使用它。他們也在教程中說 .value

不是必需的,因為如果沒有指定任何內容,它是隱式的?

對於那些說我問題的標籤和標題不正確的人,我下次會盡力做得更好,謝謝。 (這是我在 stackoverflow 上的第一篇文章)

謝謝:)###
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板