---
tags: Vue 直播班 - 2022 冬季班
---
# 🏅 Day 33 - 使用 watch 監控 props

題目
---
操作 [這個模板](https://codepen.io/hexschool/pen/MWBzLXP)，執行以下要求（只能操作 JS 的部分）：

> 使用 watch 監控 props
> - 請在 new-input 元件的 watch 中監控 props 傳來的值，讓下方 input 和上方 input 顯示相同數值。
> - 此次練習主要目的，是讓同學瞭解單向數據流的特性，無法直接修改 props 的值。

參考：https://ithelp.ithome.com.tw/articles/10219200

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：

app.component('new-input', {
props: ['propCash'],
data() {
return {
cash: 0,
}
},
template: `<input type="number" v-model="cash"/>`,
watch: {
propCash() {
this.cash = this.propCash;
}
}
});
-->

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------:|
| Wendy3#5615 |[Codepen](https://codepen.io/wendy03/pen/RwBmrgp) |
|威0#6919|[codepen](https://codepen.io/n0918679182/pen/GRBaovE?editors=1010)|
| yuyu#6310 |[codepen](https://codepen.io/yuyu0905/pen/RwBmrxV)|
| 冬天#5215 |[codepen](https://codepen.io/winter_/pen/NWBVxMB)|
|azami#5986|[Codepen](https://codepen.io/azami/pen/ExpzPbx)|
| albee#9121|[Codepen](https://codepen.io/albee-chang/pen/qByGbPb)|
|無名#6427|[Codepen](https://codepen.io/Nomoney/pen/JjBzZjO)|
|DIO大人#4776|[Codepen](https://codepen.io/oscar-2283/pen/wvxbMYx)|
|Hazel.#6020|[CodePen](https://codepen.io/Hazelhsieh/pen/VwBOeMm)|
|AuroraC#6539|[codepen](https://codepen.io/AuroraC/pen/YzjbwOV)|
|Benson#6763|[Codepen](https://codepen.io/kumashow/pen/abjrdgZ)|
|薯餅#3581|[Codepen](https://codepen.io/ColdingPoTaTo/pen/GRBaZoG)|
|威爾#1694|[CodePen](https://codepen.io/WILL_Wu/pen/oNMRxNw)|
|ㄚ翔#8126|[codepen](https://codepen.io/engineerjohnson/pen/dyjEMRd)|
|mandylai#4055|[CodePen](https://codepen.io/mandy-lai-2/pen/ExpzKmW)|
|masterYan#2480|[CodePen](https://codepen.io/htzwgoqt-the-looper/pen/YzjbqOO)|
|Jill Lee#0809|[CodePen](https://codepen.io/chi-ling-lee/pen/dyjEMgj?editors=1010)|
|Chi#7605|[Codepen](https://codepen.io/YoChi84/pen/ExpzKMb)|
|jacky010080#0880|[CodePen](https://codepen.io/Yen-Jung-Chen/pen/oNMRxOM)|
|JackC#0411|[Codepen](https://codepen.io/key0329/pen/wvxbGOv)|
|法希娜#3206|[Codepen](https://codepen.io/yiiserpf-the-encoder/pen/MWBdyzb)|
|int#7518|[Codepen](https://codepen.io/intHuang/pen/GRBaZxP?editors=1010)|
|泊岸#3466|[Codepen](https://codepen.io/qoq77416416/pen/qByGNdM)|
|Hilda#7085|[Codepen](https://codepen.io/vwquikad-the-vuer/pen/KKBLMza)|
|楊苡安#2752|[Codepen](https://codepen.io/yi-an-yang/pen/WNKBxER)|
|Rainliao#2616|[Codepen](https://codepen.io/billpop741/pen/abjrpmK)|
|Potatolee#7749|[Codepen](https://codepen.io/potatoleee/pen/rNrgLJK?editors=1011LinaChen1796https://codepen.io/LinaChen/pen/wvxbGbv)|
|LinaChen#1796|[Codepen](https://codepenhttps://codepen.io/datsxzqg-the-selector/pen/dyjEppG)|
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/eYjaWYm)|
|helena#8461|[Codepen](https://codepen.io/helena27/pen/vYawxEG)|
|阿鑫#4346|[CodePen](https://codepen.io/Neil1024/pen/BaPeZbp?editors=1011)|
|圈圈#4060|[Codepen](https://codepen.io/wjejfczn-the-bold/pen/MWBdvZM?editors=1011)|
|MengLin#3001|[Codepen](https://codepen.io/aacj2642/pen/zYLQdQv)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/bGjyoez)|
|小木馬#8760|[Codepen](https://codepen.io/wmmtbcsd/pen/poZmdBa)|
|Zack_P#1805|[Codepen](https://codepen.io/tmzazirh-the-animator/pen/jOpoYod)|
| Bassjim#0118 | [Codepen](https://codepen.io/unrtxbaq/pen/rNrgJxO) |
| Austyn#0949 | [Codepen](https://codepen.io/fish90547/pen/dyjEevG) |
| Cheryl#4007 | [Codepen](https://codepen.io/Cheryl-Hsu/pen/ExpzLvq) |
| Shuo#1596 | [Codepen](https://codepen.io/chiangchungshuo/pen/jOpoKxO?editors=1010) |
| christina#6185 | [Codepen](https://codepen.io/chrisc0210/pen/JjBqVeY) |
| hannahTW#2224 | [Codepen](https://codepen.io/hangineer/pen/gOjJyjx) |
| 出事了阿伯#9923 | [Codepen](https://codepen.io/BradpittLai/pen/JjBQWLj?editors=1010) |
| Amberhh#2465 | [Codepen](https://codepen.io/Amberhh/pen/gOjJraj) |
| YC#2522 | [CosePen](https://codepen.io/YCLu/pen/dyjBqPB) |
| PayRoom#8328 | [CodePen](https://codepen.io/water38198/pen/oNPvNVP) |
| 柚子 #3958 | [CodePen](https://codepen.io/as6625998/pen/QWVLgwP) |
| kevin #8349 | [CodePen](https://codepen.io/xlqjezvc-the-encoder/pen/WNgeOxW?editors=1011) |
| Kimi#9564 | [Codepen](https://codepen.io/kimihu91/pen/OJwqBqy) |
| Yiru#0236 | [Codepen](https://codepen.io/yiru94/pen/xxabOKx?editors=1011) |
| Yuna Huang#2692 | [Codepen](https://codepen.io/Yuna1002/pen/vYzOJaz?editors=1010) |
| GOD_QWERTYUIOPLKJLKLLOINJ_MASTER#4922 | [Codepen](https://codepen.io/sho666/pen/NWLqaJg?editors=1010) |
|yaru#6308|[CodePen](https://codepen.io/lszaietc/pen/NWLGKmp?editors=1011)|
|阿蘇#8531|[CodePen](https://codepen.io/susu3131/pen/yLxYYWw?editors=1011)|
|suihsilan#9485|[CodePen](https://codepen.io/suihsilan/pen/yLxeywy)|
|YI#0863|[CodePen](https://codepen.io/YI0305/pen/eYLZgEV?editors=1111)|
|Mylène#2481|[CodePen](https://codepen.io/hamajibashi/pen/mdGEpEV)|
| ABOOS#6276 | [CodePen](https://codepen.io/guhungyin/pen/YzOGxXo) |
| yoyo#1003 | [CodePen](https://codepen.io/pen/MWqJygV?editors=1111) |
|小白#2406| [CodePen](https://codepen.io/gracewhite/pen/GRXmBLy?editors=1010)|
|黑白兔#2406| [CodePen](https://codepen.io/johnny329/pen/eYLLWNd)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/ZEMmawr) |
|KC_8685#9343|[Codepen](https://codepen.io/cathy7411/pen/PodxmvL)|
|Eason#7884|[Codepen](https://codepen.io/ASLEO/pen/zYmNemo)|