[Vue.js]특정 데이터들의 값들을 하이라이팅 할 수는 없을까?

현업에서 진행중인 프로젝트에서 Vue를 활용하여 Front 단을 구축하는데,

 

다음과 같은 화면에서 공급자명, 전자세금계산서승인번호, 사업자번호, 공급가액, 세액 등은 API를 활용해서 데이터를 받아오고 있는 상황이다.

그리고 증빙일, 전기일, 지급예정일 등은 데이터 값을 사용자 기준 날짜를 계산하여, 자동으로 기입되며, 다음과 같이 Edit 할 수 있게 구성되어져 있다.

 

그리고 적요, 의견, PO번호, 계좌번호 등은 사용자가 값을 세팅할 수 있게, 자유도를 높여 놓았다.

 

하지만, 여기서 Vue가 익숙하지 않아서, 머리속에 생각나는 기능은 있지만 아직 구현을 하지 못한게 존재한다.

 

바로 증빙일, 전기일, 지급예정일 같은 날짜는 자동으로 입력되는 값인데, 사용자가 변경할 수 있는 값인데도 불구하고, 일반 값들이랑 차이가 나지 않는 UI를 가지고 있다.

 

그래서 해당 프로그램을 사용할때, 변경할 수 있는 부분인줄 모를 수도 있다는 단점을 가지고 있다.

 

 

vue파일에서 template에서 보여지는 화면은 다음과 같다.

 

data 안에 settingValues 값들이 존재해야 다음과 같이 key가 i 이다.

 

방법이 없을까? 

 

추후에 실력이 업그레이드 되면, 기능 추가 및 UI 업데이트를 할 예정이다.

초록색 영역은 text 영역으로 보여지는 칸