标签
Vue watchEffect在await後讀取欄位，為何改值卻沒更新？
切換選單後，Vue畫面上的選項已變，載入內容卻停在第一次？如果你把資料讀取寫在watchEffect(async () => ...)裡，先看那個欄位是在...
Vue清單要聚焦某筆欄位：用function refs按ID找元素
清單重新排序後，程式用ref陣列的第幾個元素聚焦，結果跳到另一筆輸入欄位。先分清資料ID與DOM陣列位置。Vue官方template refs文件提醒，v-fo...
Vue卡片內按按鈕也觸發外層：click stop阻止冒泡
按收藏按鈕時，卡片的開啟動作也一起執行。先看按鈕是否放在有click監聽的父元素裡。DOM的點擊事件通常會往父層傳播，內層按鈕的處理函式完成後，外層仍可能接到同...
Vue收合再打開輸入不見：v-if與v-show保留狀態差別
設定面板輸入了一段文字，收合再打開卻變空白。先看收合條件用了 v-if還是 v-show，再確認文字狀態放在哪個元件。v-if不顯示時會拆掉對應內容；如果輸入草...
Vue計算排序後原清單也變：先複製陣列再sort
商品頁一邊顯示原始順序，一邊用computed顯示低價優先。讀取排序清單後，原始清單卻也被排過了。先看getter裡是否直接對來源呼叫 sort()。JavaS...
Vue改值後讀到舊畫面：nextTick等更新完成
程式把計數改成1，接著立刻讀畫面的文字，結果還是0。資料已經更新，畫面不是每一行JavaScript都立即重畫。Vue會把同一輪變動的DOM更新整理成批次，等更...
Vue子元件改props連父頁也變：用emit交回修改
把會員物件傳進編輯卡片後，子元件改了 user.name，父頁的名稱竟然也跟著變。你可能以為props是唯讀，所以子元件裡的修改應該沒有作用；問題是，物件的巢狀...
Vue watch沒看到陣列變動：分清替換與深層監聽
清單畫面已經多了一筆資料，放在 watch 裡的儲存或提示邏輯卻沒有執行。這通常不是 Vue 沒有更新，而是畫面和 watcher 觀察的變動範圍不同。把整個陣...
Vue解構後畫面不更新：reactive欄位用toRefs保留連動
Vue頁面上有數量與總價。按下加一後，數量在資料物件裡已經改變，畫面上的某個數字卻還停在原值。若你曾把 reactive() 的欄位解構出來，例如 const ...
Vue搜尋結果晚回來蓋掉新結果：取消舊請求
搜尋框已改成新字詞，畫面卻突然跳回舊結果。請求發出得早，不代表一定先回來；舊請求較慢、新請求較快，若兩個回應都直接寫入同一份結果，最後完成的舊請求就會蓋掉新內容...
Vue列表刪掉一行後輸入內容跑位：key不能隨便用索引
列表第二行的備註明明填好了，刪掉第一行後，備註卻出現在另一筆資料旁邊。先看每行的key：如果使用陣列索引，刪除或排序後，同一個位置就可能代表不同資料，元件裡的輸...
Vue computed 怎麼用：讓購物小計跟著數量更新
商品數量改了，小計卻還停在舊數字，通常是把「可算出來的資料」也存成另一份狀態。Vue 的 computed 適合處理這種衍生值：保留單價與數量，讓小計跟著它們變...
- 1
- 2