---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 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

#### 額外挑戰
完成上述題目後，嘗試將 JS 區塊改為使用 Composition API 撰寫

## 回報流程

將答案寫在 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;
}
}
});

https://codepen.io/jmimiding4104/pen/mdoJMVB

額外挑戰：
https://codepen.io/jmimiding4104/pen/KKEpqrB?editors=1111

模板與解答皆有使用 Bootstrap5(於 Setting 中引入)，
所以如果想要畫面呈現是相同的要記得載入 Bootstrap5 的 CDN。
-->

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------:|
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/mdoXXNw?editors=1010) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/vYPdRBx) |
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/dyrddxp?editors=0011) |
| Ann Chou | [CodePen](https://codepen.io/annchou_illu/pen/MWxQVoN) |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/bGZLvBx) |
| py | [CodePen](https://codepen.io/Wpypy/pen/QWoQmjZ?editors=1010) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/gOEveKj) |
| 熊大 | [CodePen](https://codepen.io/asiating/pen/abMqYxW) |
| Nelly | [CodePen](https://codepen.io/Nelly-Guo/pen/bGZLMBG?editors=1010) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/KKEQRRN) |
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/poYaVqP?editors=1011) |
| 風羽 | [CodePen](https://www.boca.gov.tw/sp-natr-batchform-1.html) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/jOJZKbL?editors=1010) |
| Eden |[Codepen](https://codepen.io/iseden/pen/wvOyXre)|
| jia yu | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/ZEPrRZP?editors=1010) |
| Ryann | [CodePen](https://codepen.io/csw8524/pen/rNRJKXE) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/gOEvKyR) |
| peggy | [CodePen](https://codepen.io/peggylai/pen/eYXVjBO?editors=1011) |
| 狸貓 | [CodePen](https://codepen.io/tanuki320/pen/ExMQRqY?editors=1011) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/RwdQYEz) |
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/wvOyEja?editors=1010) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/bGZLOQE) |
| RayRay | [CodePen](https://codepen.io/CityRay/pen/bGZLxRN) |
| stone4584 | [CodePen](https://codepen.io/Royen0506/pen/OJqQdyN?editors=1111) |
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/vYPdbMy) |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/JjzpzyR) |
| Tom | [CodePen](https://codepen.io/sp1daTomm/pen/vYPdbQK) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/JjzpqYw) |
| 欣霓 | [CodePen](https://codepen.io/tvxq5206/pen/wvOyLmY?editors=1010) |
| chris | [CodePen](https://codepen.io/cjtseng07/pen/dyrdxbd) |
| MY | [CodePen](https://codepen.io/ahmomoz/pen/vYPRXEj) |
|wei_Rio|[CodePen](https://codepen.io/wei_wu/pen/GRexNGq?editors=1011)|
| KUN. | [CodePen](https://codepen.io/barry91205/pen/LYadLOR) |
| 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/dyrmaVB) |
| runweitng | [CodePen](https://codepen.io/weiting14/pen/VwRXRva) |
| PayRoom |[CodePen](https://codepen.io/water38198/pen/rNRvvXm)|
| Ting | [CodePen](https://codepen.io/liara/pen/rNRvbEy) |
| macihuang | [CodePen](https://codepen.io/macy1215/pen/KKEBmGg) |
| MikeLin | [CodePen](https://codepen.io/MikeLin0701/pen/poYxMLV) |
| Pikachu | [CodePen](https://codepen.io/_pikachu_/pen/gOEQGNj) |
| Antonio | [CodePen](https://codepen.io/gwhvusel-the-builder/pen/OJqorpg) |
| Iris | [CodePen](https://codepen.io/iris831206/pen/VwRNbeg?editors=1111) |
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/PoLgbdz) |
| Rock | [CodePen](https://codepen.io/xiu43317/pen/poYmMmv) |
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/poBzaVz) |
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/zYXYgGW?editors=1010) |
| yuan! | [CodePen](https://codepen.io/townyuan/pen/dyLMePO) |

<!--

| user | [CodePen]() |

-->