[Vuejs] DB에서 받아온 함수 명을 v-on:click에 적용하는 방법

 

 

화면에 대한 그리드의 모든 속성 정보를 데이터베이스에서 관리하는 경우가 있다.

그리드의 헤더, 컬럼 데이터, CSS class명, width/align 값, 클릭 이벤트 시 호출하는 함수 명 까지 .. !!

vue 파일에 그리드의 헤더와 컬럼 개수만큼 일일히 태그를 적고싶지 않다는 것이 그 이유다. 😇 .. ㅎ

 

모든 상황을 제어할 수 있을까 의문은 들었지만 일단 해보긴 했는데

해당 데이터를 모두 axios로 받아와서, 객체에 담고 v-if 범벅으로 루프를 돌리니까 각 컬럼의 케이스에 맞게 정상적으로 나오긴 했다.

 

하지만, 딱 하나가 제대로 적용이 되지 않았는데, 바로 클릭 시 호출하는 함수 명이다.

저 값이 그냥 스트링 처리 되어버려서, 인식을 못하는 것 같았다.

eval을 바로 써보아도 안먹어서, 하나 건너 호출했더니 먹는 모양이다.

 

(X)
<button type="button" v-on:click="cItem.clickFnName(cell.item)">{{ cell.item[cItem.binding] }}</button>

(X)
<button type="button" v-on:click="eval(cItem.clickFnName)(cell.item)">{{ cell.item[cItem.binding] }}</button>

---

(O)
<button type="button" v-on:click="findLinkFun(cItem.clickFnName, cell.item)">{{ cell.item[cItem.binding] }}</button>

.
.
.

const findLinkFun = (fnName, seqNo) => {
  eval(fnName)(seqNo);
}

---

그리고, 해당 영역을 공통 컴포넌트로 빼서 모든 화면에서 사용할 수 있도록 했다.

우선 컴포넌트를 분리하여 코드를 따로 뺀 뒤, 부모에서 공통 컴포넌트로 props로 보내야 할 항목을 지정했다.

다른 특이점은 없었고, 대개 화면마다 DB에서 데이터를 가져오는 URL만 다르므로 해당 항목만 props로 받았다.

(초반에 공통 컴포넌트에서 계속 props를 못 찾았는데, setup에 props를 매개변수로 넣지 않아서 그런거였다.)

또한, 부모에서 공통 컴포넌트로 이벤트를 보내야하기 때문에 emit로 이벤트 명과 매개변수를 받았다.

 

해당 화면에는 그리드가 3개가 붙어있어서 중복되는 코드가 많았는데

DB에서 받아오면서 루프를 돌리고, 그 영역마저도 공통 컴포넌트 처리를 하니까 백 줄의 코드가 단 열 줄로 줄어들었다.

 

+) eval 쓰지말고, new Fucntion() 쓰기~