[Vue.js] v-for 버튼 여러개 만들기

프로젝트 진행시 vue에서 해시태그 버튼을 생성하고 생성된 버튼마다 값을 부여하여 배열에 담아 보내는 작업을 진행했다

comment

 // 버튼 생성을 위한 해시태그의 이름
hname : [ '김포공항', '인천공항', '김해공항', '제주공항', '먹거리', '놀거리', '행사', '명소', '가족', '친구', '연인', '신혼' ],
// 해시태그 버튼 색(2가지 반복)
hcolor : ['#0339A6','#F2D1C9', '#0339A6','#F2D1C9','#0339A6','#F2D1C9','#0339A6','#F2D1C9','#0339A6','#F2D1C9', '#0339A6','#F2D1C9'], 

원래는 state.hname, state.color 같은 변수들도 DB에 저장된 것을 꺼내와 사용하는게 좋다
데이터가 변경되거나 수정되는 경우 일일이 가서 변경해주어야 하면 번거롭기 때문이다
DB에서 변경이나 조회가 처리되고 vue에서는 가져다 쓰기만 해야한다

블로그 템플릿 설정같은 서비스도 DB에 설정된 데이터가 저장되고 저장된 데이터를 불러와서 사용하는 방식이다
데이터의 수정/변경은 DB에서 진행되고 데이터를 가져와서 사용만 해야한다

object 형태일때만 값을 넣을 수 있다

v-for안에 여러 데이터를 담아 꺼내 사용하고 싶은 경우 key, value 형태로 되어있어야 사용가능하다

            [{no:1, name:'a'},{no:1, name:'a'},{no:1, name:'a'}]

            const arr [];
            for(i=0; i<3; i++){
                arr[i] = {no:1, name:'a'}
            }

            arr => [{no:1, name:'a'},{no:1, name:'a'},{no:1, name:'a'}]

로직 변경

1. DB HASHTAG 테이블에 HCOLOR 컬럼을 추가하고, 원하는 색상 데이터를 입력한다
2. 백엔드에서 key, value 형태로 HASHTAG 테이블의 정보를 받아오고
3. 받아온 key, value 형태의 데이터로 버튼에 값을 넣어준다

1. HASHTAG 테이블에 HCOLOR 컬럼/색상 추가

2. key, value 형태로 HASHTAG 테이블 데이터 넘겨주기

BoardRestController.java

    @GetMapping(value = "/hashtagdataget.json")
    // 127.0.0.1:8080/ROOT/api/board/hashtagdataget.json
    public Map<String, Object> hashtagDataGET(
    ){
        Map<String , Object> map = new HashMap<>();
        try {
            List<Hashtag> hashtaglist = hRepository.findAll();
            System.out.println("hashtaglist => " + hashtaglist);
            System.out.println("조회된 hashtag의 길이 => "+ hashtaglist.size());
            
            if(hashtaglist != null){
            List<HashtagDTO> list =  new ArrayList<>();

            for(int i=0; i<hashtaglist.size(); i++){
                HashtagDTO hashtag = new HashtagDTO();
                hashtag.setHno(hashtaglist.get(i).getHno());
                hashtag.setName(hashtaglist.get(i).getName());
                hashtag.setHcolor(hashtaglist.get(i).getHcolor());

                list.add(hashtag);
            }
                map.put("list", list);
                map.put("status", 200);
            }
        } catch (Exception e) {
            map.put("status", -1);
            map.put("result", e.getMessage());
        }
        return map;
    }

출력되는 데이터 확인

key, value 형태의 데이터가 출력된다

3. v-for 사용하여 버튼에 원하는 값 넣기

BoardwritePage.vue

<template>

<el-form-item label="해시태그">
	{{state.hashtag}}
	<el-button v-for="(obj) in state.hashtag" :key="obj" :color="obj.hcolor" @click="handlePush()">{{obj.name}}</el-button>
	<label style="margin:10px;"></label>
</el-form-item>

hasgtagData()

hashtag : [] 해시태그의 번호를 받을 배열 선언 해준 후 받아온 데이터를 담는다
hasgtagData()함수는 페이지 로딩시 실핻되어야 하니 onMounted 에 넣어준다

// 해시태그 DB 정보 가져오기
	const hasgtagData = async() => {
		const url = `/ROOT/api/board/hashtagdataget.json`
		const headers = {"Content-Type" : "application/json"}
		const {data} = await axios.get(url, headers)
		if(data.status == 200){
			state.hashtag = data.list
		console.log('해시태그 정보!!!!!!!!!!!!!! ', state.hashtag)
		}
	};

출력결과