[Vue.js 2] Query String에서 필요한 값만 가져오기
자세한 설명은 나보다 똑똑한 사람들이 많기에 생략 방법 1. URLSearchParams 활용 ... 생략 ... mounted() { const params = new new URLSearchParams(location.hash); const obj = this.paramToObj(params) }, methods: { paramToObj: function(params) { const result = {} // 빈 객체 for(const [key, value] of entries) { result[key] = value; } return result }, ... 생략 ... 방법 2. 라우터가 있다면 this.$route 활용 사용중인 vue파일에서 this.$route 로그 찍어보면 아래 이미지와 같..
[Vue.js 2] 삼항연산자로 이미지 바꾸기
소켓에서 받은 데이터에서 특정 조건이 만족되면 아래 이미지와 같이 회색에서 파란색이 되도록 만들고 싶었다. 1. App.vue 2. socket 모듈 ... 생략 ... const setImage = (img) => { this.imgMark = img; } ... 생략 ... const changeData = (data) => { this.imgMark.src = data ? require("@/assets/images/on.png") : require("@/assets/images/off.png"); } ... 생략 ... 처음엔 "../이미지 경로" 이렇게 썼더니 아래 그림처럼 떠서 경로 잘못쓴줄 알고 당황했다.
[Vue.js 2] 배열 Pagination
먼저, 1차원 배열을 Json으로 만들고 v-for를 활용하여 table에 보여지도록 만들어야 했다. pagination 하는 방법 배열을 나누는 방법 template 작성 No Name Birth Day Address {{ data.no }} {{ data.name }} {{ data.birth }} {{ data.addr }} {{idx+1}} {{size}} script 작성 style 작성 오른쪽에 [WDS] Disconnected! 이건 왜 뜨는지 모르겠다.