程式設計VueJS 使用 Ref 綁定元件
分享綁定元件後操作 HTML DOM 的方法 Vue 2 / Options API <div ref=someRefName>Hello World</div> const refVar = "someRefName" (this.$re...
Vue3
程式設計程式設計Vue 父子元件傳值
Hint 為了共用，子元件製作時儘可能做 loose coupling、才不會有多個子元件共同修改同一個值的問題loose coupling 的架構下，【父 ➞ 子】用 props 單向傳入、【子 ➞ 父】用 emits 單向傳出 不希望元...
程式設計Vue3 使用 CSSProperties 傳入 CSS
傳入CSS值 import type { CSSProperties } from "vue"; interface CheckboxProps { modelValue: boolean; checkboxStyle?: CSSPrope...
程式設計Nuxt3 如何引入環境變數
在 Vue2 或 Vue3 的專案中，我們常常會引入環境變數，例如 process.env.NODE_ENV === 'development'、process.env.NODE_ENV === 'production'，來區分不同工作環境...
程式設計Vue3 無法watch string型態的 prop
在子元件中，若想監看傳入的 props 有無變化時，我們會使用 watch( ) 。但是若 prop 是 primitive type 的時候，會出現下列的錯誤 (以 string為例) Argument of type 'string' ...
程式設計Vue 更新 ref 中的「整個」array 時失效
情況 there are 2 files below, when I import a const object (called COMMON) to update an array content in another object of...
程式設計利用 Vue inheritAttrs: false 繼承屬性到第二層子元件
用在：html 有複數層的子元件，加上inheritAttrs: false 的話才能將 native attribute 透過 $attr 傳入第二層的 html tag 中、且不會影響第一層的 label Vue2 例如下方範例的 re...
程式設計Vue2 vs Vue3 生命週期
官方文件中有說明 Composition API 中的生命週期有哪些：簡單說、Vue3 把 created 類的拿掉了 Options APIComposition API inside setupbeforeCreate無created無...
程式設計VueJs delay input search 延遲搜尋
一般的實作會用 v-model="searchedEmail"，然後 listen inputed 的變化後向 server 發送值 問題點：每輸入一個字元就向自已的 server 發送 request，連續一直輸入，其實就是自體DDoS攻...
程式設計VueJs Dynamic components & import 動態元件
不用寫一堆 v-ifv-if-else 來區分元件，一個 component 元件就可以 <component v-bind:is="currentTabComponent"></component> const currentTabCo...