Song Minu

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을 실행을 할지 명칭을 입력해야 하는데 안 해가지고 에러가 떴었다. 근데 그걸 못찾아서...... 이렇게 제대로 명시하면 끝

사용자 등록을 하는 컴포넌트를 하나 만든 후 수정을 할 때 어떻게 하면 만든 컴포넌트를 재사용할 수 있을까 고민하다 만들어본 소스입니다. 디자인 프레임워크인 VuetifyJS를 사용해서 만들었습니다. 먼저 구성 화면 위 화면은 사용자 리스트를 그려주는 listTable.vue파일이고 사용자 등록 버튼을 누르거나 리스트에 있는 펜 모양 아이콘을 누르면 사용자 정보 컴포넌트인 editUser.vue 파일이 열린다. listTable.vue 파일 소스 mdi-pencil mdi-delete 봐 둘 부분은 수정 버튼을 누르면 실행하는 editItem(data) 부분과 editUser.vue 컴포넌트에 넘길 속성으로 만든 user_info 부분, editUser.vue 컴포넌트로부터 데이터를 전달 받을 @set_..

전에 작성했었던 NuxtJS 웹팩을 받은 후 따로 VuetifyJS를 적용한 글이 있는데(minu0807.tistory.com/71) 버전이 낮은 웹팩에다 적용하다 보니 불편한 점이 몇 있었다. 그래서 그냥 한방에 NuxtJS와 VuetifyJS가 적용된 프로젝트를 만드는 방법이다. 설치 시 나름 최신 버전으로 받아진다. 방법도 쉽다. npm init nuxt-app name 이거 한 줄 이면 시작이다. name 부분에 입력한 텍스트로 디렉터리가 생성되며, 그 안에 설치가 된다. 프로젝트명을 입력하면 모두 설치 완료 후 웹 title 명으로 지정된다. (nuxt.config.js에서 수정 가능) 자신이 원하는 방식 선택 이것도 자신이 원하는 방식 선택 보통은 Npm을 선택하지 않을까 싶다. Package..

처음엔 컴포넌트로 로딩 파일을 만들고 Vuex를 이용하여 공통적으로 사용할 수 있게 만들었었다. 만들고 나서 괜찮은 것 같은데? 하고 있었는데 NuxtJS 공식 홈페이지 Docs를 쭉 보다가 loading이라는 게 있어서 봤다. nuxtjs.org/docs/2.x/configuration-glossary/configuration-loading The loading Property Nuxt.js uses its own component to show a progress bar between the routes. You can customize it, disable it or create your own component. nuxtjs.org nuxt.config.js에서 loading이라는 옵션을 사용하면..

v2.vuetifyjs.com/ko/components/forms/ Form component — Vuetify.js The form component provides a wrapper that makes it easy to process and control validation states of input components. v2.vuetifyjs.com 위 경로에서 제공해주는 정보를 확인해보면, vuetify 자체에서 제공해주는 form 유효성 검사 기능이 있고, npm 모듈을 사용해서 검사하는 2가지가 있다. (vuelidate, VeeValidate) 모듈 2가지는 한번 봤는데 설치하기도 귀찮고... 해서 그냥 자체 제공하는 걸로 사용해봤다. 사용 방법은 간단하다. 유효성 체크를 할 v-text..

return-object 속성을 주면 된다. 먼저 속성을 안 주고 사용했을 때의 값 예시 data() { return { authList: [ { name: '관리자', value: 'A'}, { name: '일반 사용자', value: 'M'} ], user_auth: '', user_auth_rule: [ v => !!v || '권한은 필수 선택 사항입니다.' ], } }, 이제 셀렉트 박스를 선택 후 버튼을 눌러서 this.user_auth를 console.log로 찍어보면 선택한 데이터의 value값만 가지고 온다. 보통의 경우에는 이렇게만 써도 상관은 없지만 종종 value값과 해당 text도 가지고 와야 할 때가 있는데 그럴 때 return_object를 사용하면 된다. 사용했을 때의 예시 r..

에러가 발생한다거나 특정 상황에 이전 페이지로 돌아가는 방법으로 this.$router.go(-1); 이 방식을 사용했었다. 하지만, 이런 방식은 별로 선호하지 않아서 방법을 찾아봤었다. -1로 했을 때 분명 특수한 상황에 생각했던 페이지로 이동하지 않을 상황이 분명 나올 것이라 생각했다. 그래서 찾아본게 $nuxt를 사용하는 방법이다. methods: { back() { try { console.log(this.$nuxt.context); } catch (err) { console.log('back error', err); } } }, 위 소스는 뒤로가기 버튼을 눌렀을 때 실행되는 메소드이다. vue파일에서 위 코드를 입력 후 페이지 이동을 한 뒤 위 코드를 실행시키면 아래와 같은 정보들이 나온다. 다..