리스트에서 div id에 각각 다른 id 부여방법

[pinest94]

• id를 동적으로 주지않으면 리스트 아이템의 div id 값이 동일하다.

<div v-for="qna in qnas" :key="qna.id" class="qna-list">
        <div class="qna-list-box">
            <!-- 중략 -->
            <div class="qna-contents-footer">
                <button id="'answer-btn" type="button" class="answer-btn @click="displayAnswer()">답변하기</button>
            </div>
            <div id="'qna-answer" class="qna-answer">  ----------------> default display: none 상태 / displayAnswer 호출시 변경
                <h4>{{ qna.answerWriter }} | {{ qna.answerRegisterDate }}</h4>
                <span>{{ qna.answer }}</span>
            </div>
        </div>
        <hr>
    </div>

• 위와 같이 구현한 경우 displayAnswer 메서드 원하는 대로 동작하지 않는다.

• 이유) 동일한 id 값인 "qna-answer" 값을 가지므로 맨 위에 있는 문의의 답변이 보여질 뿐이다.

• 즉, displayAnswer 메서드는 해당 qna의 id값을 이용하여 개별적으로 기능할 수 있어야한다.

<div v-for="qna in qnas" :key="qna.id" class="qna-list">
        <div class="qna-list-box">
            <!-- 중략 -->
            <div class="qna-contents-footer">
                <button v-bind:id="'answer-btn-'+qna.id" type="button" class="answer-btn @click="displayAnswer(qna.id)">
                         답변하기
                </button>
            </div>
            <div v-bind:id="'qna-answer-'+qna.id" class="qna-answer"> <---------- 변경된 코드 v-bind:id 사용
                <h4>{{ qna.answerWriter }} | {{ qna.answerRegisterDate }}</h4>
                <span>{{ qna.answer }}</span>
            </div>
        </div>
        <hr>
    </div>

• 위와 같은 코드를 보면 div id에 v-bind:id를 사용하여 data값을 사용한다.

• 그렇게 되면 qna-answer-1, qna-answer-2, qna-answer-3 ... 으로 div id값이 모두 달라진다.

• 이제 displayAnswer에 파라미터 값으로 qna.id를 전달하여 사용하면 개별적으로 기능할 수 있게 된다.