배열의 키값 동적 할당하기

1. 데이터

// commonData.js
export default {
  skills: [
    { master: 'WEB', detail: ['JAVA', 'C#', 'REACT', '.NET'] },
    { master: 'SAP', detail: ['A', 'B', 'C', 'D'] },
    { master: 'WEB컨설턴트', detail: ['JAVA', 'C#', 'REACT', '.NET'] },
    { master: 'SAP컨설턴트', detail: ['A', 'B', 'C', 'D'] },
  ],
  area: [
    {
      master: '서울특별시',
      detail: ['강남구', '강동구', '강북구', '강서구'],
    },
    { master: '경기도', detail: ['가평군', '고양시 덕양구'] },
    {
      master: '인천광역시',
      detail: ['강화군', '계양구', '미추홀구', '남동구'],
    },
  ],
  certification: [
    {
      master: 'IT정보통신',
      detail: ['정보처리기사', '웹디자인기능사', 'CCNA', '정보기술자격(ITQ)'],
    },
    { master: '운전면허', detail: ['1종보통', '2종보통', '대형', '특수'] },
  ],
};

2. 소스코드

<script>
import commonData from './commonData.js';
export default {
  data() {
    sklM: [],
    sklD: {},
    areaM: [],
    areaD: {},
    crtM: [],
    crtD: {},
  },
  created() {
    this.initCommon();
  },
  methods: {
    initCommon() {
      this.spreadCommonData(commonData.skills, this.sklM, this.sklD);
      this.spreadCommonData(commonData.area, this.areaM, this.areaD);
      this.spreadCommonData(commonData.certifiaction, this.crtM, this.crtD);
    },
    spreadCommonData(Arr, targetM, targetD) {
      Arr.map((mArr) => {
        const master = mArr.master;
        targetM.push(master);
        const dArr = [];
        mArr.detail.map((detail) => {
          dArr.push(detail);
        });
        targetD[[master]] = dArr;
      });
    },
  },
};
</script>

3. OUTPUT