textarea組件,官方給出的監聽事件有以下事件:
其中一定要注意,當使用 v-model 對表單內容進行雙向綁定的時候,@input 事件是在綁定變量變化前觸發的,所以如果在input事件內打印綁定變量,會得不到值,因為input執行的時候,v-model綁定的變量還沒變化,如下所示:
可以看到,第一次打印的v-model綁定的變量是空的,而第二次打印出來的值卻是第一次輸入賦給的值,說明第二次輸入還沒有造成v-model綁定變量發生變化。
除此之外,注意看@input事件的傳值:
通常情況下,@input=“input”的寫法里,是沒有傳值的,這個時候,在methods里,input(e){}函數中打印出來的 e.detail.value 就是輸入框中實時的內容。
但是,假如寫方法的時候給 input 一個傳值,例如:@input="input(index)" 此時,在methods里,input(index){}函數中打印出來的就是 index 的值。
綜上,@input方法在沒有傳值的時候是默認可以取到輸入框中實時的內容數據,但是如果主觀的添加傳值,則取到的就是所傳的參數值。這樣的情況可以在循環中用來傳索引值。
tips:那如果在傳值的時候又想要索引值又想要實時的輸入框內容數據怎么辦呢?
這個時候可以通過操作dom的方式加上去,寫法如下:
@input="input($event , index)", 在methods里為 input($event , index){},但是需要注意的是,這樣的寫法,只能在進行輸入操作的時候獲取到輸入框的實時數據,如果是對輸入框內容的刪減操作,取出來的數據就是null。