Song Minu

nuxt와 vuetify를 이용해 프로젝트를 만들면서 alert 창을 띄우다 보니 기본 alert 창이 보기가 너무 싫었다. vuetify에서 제공하는 컴포넌트를 이용해서 만들어보면 괜찮지 않을까? 하는 생각으로 만들어봤다. 기왕 만들 거면 alert 컴포넌트를 만들어서 alert을 띄울 때 pages나 components 디렉터리에서 쉽게 사용할 수 있고, store에서도 쉽게 사용할 수 있게 만들고 싶었다. 그래서 생각한 건 store를 사용해보기로 했다. store/index.js 소스 export const strict = false; export const state = () => { return { alert : false, alert_data: { type: 'primary', //type은..

만들다 보면 시작일과 종료일을 선택하는 기능을 만들어야 하는 상황이 분명 생길 수 있다. 그리고 시작일이 종료일보다 높은 날짜가 선택되거나, 종료일이 시작일보다 낮은 날짜가 선택되는 등의 상황이 나오면 분명 이야기가 나올 수 있기 때문에 그걸 제한하는 기능을 추가적으로 작성해줘야 한다. vuetify에서 제공하는 v-datepicker 속성 중에 min, max를 쓰면 쉽게 구현이 가능하다. 우선 예제로 구현한 모습이고 템플릿 소스 Cancel OK Cancel OK

NuxtJS로 만든 웹 사용 중 페이지가 변경될 때마다(URL이 변경될 때마다) 특정 이벤트를 발생시키고 싶어서 찾아봄. watch를 쓰면 될 것 같긴 했는데 마땅한 방법이 생각 안 나서 찾아봤었는데 방법이 정말 간단했었다. watch: { $route(route) { console.log('$route : ', route); } } 방법은 이렇고 페이지를 이동할 때마다 console.log를 찍히는 걸 보면 이렇다. 이걸 이용해 만들어 본건 vuetify의 v-app-bar 안에 v-breadcrumbs를 써서 페이지를 이동할 때마다 페이지의 제목을 표시하고 싶어서 사용해봤었다. 이런 식으로 사용이 가능하다. 소스 일부분은 이렇다. mdi-chevron-right 메뉴를 클릭할 때마다 watch를 통해..