實作效果如下：
通過 v-if 的 boolean值來動態變化是否顯示文本框還是 button 按鈕，通過 v-model 雙向系結來實作文本框內容的監聽，
由于每一行需要設定文本框的顯示與隱藏，而且資料是共享的，我們需要通過 scope來獲取每一行的值來進行系結，不然的話，就會導致某個文本框顯示了，其它文本框也跟著顯示，并且資料是共用的，都會同步變化，而設定 scope后，我們就能實作對一行資料進行更新渲染了，
為了實作當我們點擊按鈕后，讓本文看自動獲取焦點，
通過 this.$refs.saveTagInput.$refs.input.focus() 來獲取 input 的 dom 物件，接著呼叫 focus函式來獲取焦點，
$nextTick 作用是當頁面元素被重新渲染之后才會執行回呼函式中的代碼，如果不這樣做的話，我們直接通過點擊按鈕的形式，將該行的 inputVisible 設定為了 true，那么此時直接呼叫 this.$refs.saveTagInput.$refs.input.focus() 是沒辦法獲取焦點的，此時就會報錯，因為我們的 dom節點還沒有進行渲染，而先呼叫 $nextTick 就是為了等待 dom節點渲染之后，我們再獲取 input，然后再呼叫 focus 函式來獲取焦點，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/232058.html
標籤：其他
上一篇：HTML-表單提交的細節
下一篇：聊一聊函式節流和函式防抖