[ Vue.js ] 문자열을 코드로 인식하게 하기

eval()

eval 함수를 사용하면, 문자열을 넣어도 코드로 인식하게된다.

 

 

eval("6 + 2") //8

문자열으로 넣게되어도, 코드로 인식하여 두 수를 더한 결과인 8이 출력된다.

 

 

console.log(this.$refs.getData.innerHTML);

내가 eval을 활용한 것은 innerHTML 을 이용해서 ref속성의 값이 getData인 div태그의 값을 console,log에 출력하는 코드를 만들고 싶은데, 이때 getData 부분을 변수처리를 하고싶었습니당.

 

const aa = `this.$refs.${this.getData}.innerHTML`;
console.log(aa);

그래서  ` `와 ${ }를 통해서 처리를 할려했는데, 위의 코드대로하면 ` ` 안에 있는 것을 모두 string으로 인식해버려서 console,log에는 원하는 div의 값이 아닌, 코드 자체가 문자열로서 출력되었습니다.

 

const aa = eval(`this.$refs.${this.getData}.innerHTML`);
console.log(aa);

이 것을 eval 함수로 감싸서 문자열이 아닌 코드로 인식하도록 해주었더니 정상적으로 동작을 했습니다!!