Song Minu

이 둘의 차이를 정말 간단하게 생각한다면 화면상에 보여준다, 안 보여준다 정도이지만 차이가 조금 더 있다. v-if는 조건에 맞지 않으면 렌더링 자체가 안되거나, 조건을 충족해서 렌더링 되었다가 다시 바뀌면 엘리먼트가 삭제된다. v-show는 렌더링은 되지만 조건에 따라 style: display:none;으로 화면상에서만 안 보이게 하고, 바뀌면 다시 보이게 한다. 테스트 소스 AAA BBB CCC Button v-if is의 값이 true여서 v-card가 다 보이는 상태이고 버튼을 눌러 is 값을 false로 바꾸면? 화면에서도 사라졌고, 해당 v-card 엘리먼트도 사라졌다. 버튼을 다시 누르면 사라져서 로 표시되던 부분에 다시 렌더링 된 모습을 볼 수 있다. v-show 위 예제 소스에서 v-i..

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

처음 화면이고 저 시작 버튼을 누르면 인터벌을 생성해서 일정 시간마다 데이터를 불러오는 함수를 실행시켜볼 생각이다. 먼저 data() 안에 사용할걸 추가 그리고 안에 버튼 추가 mdi-pause 정지 mdi-play 시작 (VuetifyJS를 사용한 버튼입니다.) auto_reload의 값에 따라 보이는 버튼을 다르게 만들었다. methods 쪽에 이제 함수를 추가 start_auto_reload() { console.log('start!!'); this.auto_reload = true; this.auto_reload_func = setInterval(() => { this.getData(true); }, this.auto_reload_delay) }, stop_auto_reload() { consol..

부모 컴포넌트에서 자식 컴포넌트의 props에 맞춰 데이터를 넘기다 부모에서 자식 컴포넌트 안에 있는 함수를 실행을 할 수는 없을까? 하고 찾아보았는 데 있었다... 아직 모르는 게 너무 많은 듯하다. (테스트는 NuxtJS에 VuetifyJS가 적용된 프로젝트에서 테스트했습니다.) 간단한 예제 부모 컴포넌트 소스 부모 컴포넌트에서 자식 컴포넌트 함수 실행 부모 컴포넌트 run1!! run2!! run3!! 컴포넌트에 ref 값을 넣어주면 된다. this.$refs.컴포넌트에 입력된 ref명.실행할 함수 이런 식으로 하면 된다. run()에 있는 console.log 정보를 봐보면 이렇다. 자식 컴포넌트에 적용되어 있는 많은 정보들을 확인할 수 있다. 노란색으로 칠해진 부분이 자식 컴포넌트에 있는 met..

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

피치 못할 사정으로 NuxtJS에서 jQuery 기반의 슬릭그리드를 대체할 플러그인을 찾지 못해서 jQuery를 적용시킨 후 슬릭그리드를 적용해보려고 했었다. 먼저 jQuery 적용은 https://minu0807.tistory.com/90 여기처럼 적용했고, 슬릭그리드 적용은 해당 vue파일에 할까 하다가 그냥 nuxt.config.js에다 적용했다. head: { title: 'AF_Manager', htmlAttrs: { lang: 'en' }, meta: [{ charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', c..

v-checkbox에 @click에다가 native.prevent.captuer 추가 그리고 메소드에서 confirm의 else 문에 다음 2줄 추가 e.stopPropagation(); e.preventDefault(); is_checkbox(item, e){ if (confirm('해제하시겠습니까?')) { const params = { _id : item._id, is_use : e.target.checked } console.log('data : ', params); } else { e.stopPropagation(); e.preventDefault(); } }, 이렇게 하면 잘됨. 2021-06-10 해결 방법을 팀장님이 찾아주셔서 기존 글은 접어 둡니다... 더보기 vuetify에서 제공하는 ..

NuxtJS와 VuetifyJS로 프로젝트를 만들면서 jQuery기반 프로젝트에서 유용하게 사용했던 datatablese.js나 datepicker 등 많은 것들이 VuetifyJS에서 제공을 해줘서 jQuery를 사용하지 않고 프로젝트를 만들고자 했었다. 하지만, 사정이 있어 jQuery기반 프로젝트에서 사용했던 기능들을 하나하나 Vue로 기능을 구현하고 있었는데 그중 몇몇 기능은 Vue 기반 오픈 소스들 중에서도 유사한 게 없고, 그럼 기존과 좀 다르게 하고자 했으나 꼭 구현을 해야 하는 상황이 몇 있었다. 비슷한 Vue 오픈 소스를 찾아서 해봤지만, 시간적 문제 때문에 포기해야 하는 상황이 왔었다. 결국은 jQuery를 사용하기로 했다... 1. 프로젝트 설치 설치는 https://minu0807...

VuetifyJS에서 제공하는 버튼이라던가 아이콘 등 대부분의 컴포넌트들에 :to="경로" 이런 식으로 작성하면 프로젝트 내에 해당되는 경로로 이동된다. v-bottom-navigation을 만들어보다가 버튼으로 다른 사이트 링크를 띄우고 싶었는데 vuetify 이것저것 쓰다 보면서 to="url" 이것만 계속 쓰고, html 태그도 아닌 것에 익숙해지다 보니 herf라는 속성이라는 게 생각이 안 났어서 구글링을 함... 외부 사이트를 띄우고 싶을 땐 :href를 사용 GitHub mdi-github Tstory mdi-alpha-t-circle Instagram mdi-instagram

vuex를 이용한 개발 중 이런 에러가 발생했다면 vuex 파일에서 actions안에 있는 함수를 한번 확인해보자. commit 부분에 mutations 명칭이 제대로 들어갔는지 확인... 내가 했던 실수는 이렇다. 저 commit 부분에 어떤 mutation을 실행을 할지 명칭을 입력해야 하는데 안 해가지고 에러가 떴었다. 근데 그걸 못찾아서...... 이렇게 제대로 명시하면 끝