삽질블로그 삽질블로그

vue nuxt path param 라우터 구조 /survey/:id/question/:questionId 문제상황 /survey/58/question/1 -> /survey/58/question/2 으로 라우터가 넘어가야한다. 시도 우선은 nuxt 에서 path param 이 있을 시 자동으로 route name 이 "survey-id-question-questionNumber" 이런식으로 만들어진다고 한다. (참조 https://nuxtjs.org/docs/features/file-system-routing/) 따라서 일부 path parameter 변경 시에 split('/') 사용할 필요 없이 다음과 같이 할 수 있다. const pathParam = { ...this.$route.params, ..

vue nuxt 에서 layout 을 custom 하게 작성하는법 vue nuxt 의 /layout/default.vue 에 정의되는 내용대로 default layout 이 지정된다. 이때, default layout 이외의 다른 layout 을 사용해야하는 경우나 header 가 없는 페이지를 작성해야하는 경우가 있다. layout 아래에 custom layout 생성 ex) /layout/login.vue 생성 실제 화면에서 layout 을 프로퍼티로 정의 /pages/login/login.vue에서

vue2-google-map을 사용할 때 map에서 제공하는 함수들을 사용하는 방법 this.$refs.gmap.$mapPromise.then((map) => { map.setZoom(18) }) 이 promise 에서 map에 담아주는 객체는 google.maps.Map 에서 제공하는 객체이므로 이 객체를 google map api 문서 (https://developers.google.com/maps/documentation/javascript/reference/map) 에 써져있는 그대로 사용할 수 있다. * 기본세팅방법 import vue2-google-maps import Vue from "vue"; import * as VueGoogleMaps from 'vue2-google-maps'; imp..

Write with reference to https://ui.toast.com/weekly-pick/ko_20190307 1. 부모로부터 받아온 props data 를 watch 할 때 감시하고 있는 것이 객체나 배열이라면 내부 속성의 변경여부도 검사한다고 정의해줘야만 watch 에서 감지한다. 아래와 같이 deep : true 로 설정해줘야한다. export default { name: 'ColourChange', props: { colours: { type: Array, required: true, }, }, watch: { colours: { // This will let Vue know to look inside the array deep: true, // We have to move our m..

ctrl c ctrl v from https://joshua1988.github.io/web-development/vuejs/vue-router-navigation-guards/ 기억하기 위한 글 * 네비게이션 가드 > 뷰 라우터로 특정 url 에 접근할 떄 해당 url 에 접근을 막는 방법 * 네이게이션 가드 종류 1. 전역가드 : 어플리케이션 전역에서 동작 router.beforeEach(function (to, from, next) { // to : 이동할 url // from : 현재 url // next : to에서 지정한 url로 이동하기 위해 꼭 호출해야 하는 함수 }); // from 에서 to url 로 이동하기 위해서는 next() 를 호출해줘야만한다. 호출하지 않으면 모든 라우팅이 대..

강제적으로 컴포넌트를 리로드 해줘야하는 경우가 있다. 예를들면, 부모컴포넌트로부터 이미지를 전달받아 image editor를 사용하는 자식 컴포넌트가 있는데, 부모컴포넌트에서 전달하는 이미지가 변경되었을 때 자동으로 변경되지 않으므로 reload 를 해주어야만 한다. 이럴 때 component 에 key를 설정해주고, key를 변경하면 자동으로 forceRerendering 된다. 출처: https://hyeonyeee.tistory.com/97 [hyeoneee's blog]

vue 에서 공통로직을 사용할 때 나는 vue의 prototype에 funtion으로 정의하고는 했다. 하지만 이렇게 간단한 공통함수는 mixin으로 정의하는것이 편하겠다. (예를들면 아래처럼...) install( Vue ) { Vue.prototype.$isEmptyObject = function( obj ) { if( !obj || obj == null || JSON.stringify( obj ) == "{}" ) { return true; } return false; } }, mixin 에서 store 을 사용하는 방법 mixin 에서 this 는 vue component 를 가리킨다. mixin 에서 store을 사용하려면 그냥 컴포넌트 내에서 사용하는 것과 마찬가지로 this.$store 이런..

vue dom에 이벤트가 걸려있을 때, Default 로 보내주는 parameter가 있다. 예를 들어 @input="testmethod" 이벤트를 넣어놓으면 methods에 정의되어있는 testmethod 함수에서 console로 이벤트를 찍어보면 testmethod( e ) { console.log(e) } e는 해당 input dom 에 들어온 텍스트로 찍힌다. 그런데 여기서 해당 텍스트 이외에 다른 파라미터를 추가로 받아오고싶은 경우가 있다. 그럴때는 이런식으로 정의 하면 default로 가져오는 파라미터에 추가로 내가 넣은 파리터까지 받아올 수 있다. methods : { autoNext( e, count ) { console.log( "param ::: ", e, count );// `para..