vue 7강 관련 질문입니다

[김시윤]

마지막에 숙제로 모달창을 html 내용으로 채워오라고 하셨는데요

<div v-for="(원룸, i) in 원룸들" :key="i">
<h4 @click="showModal(원룸들[i])">{{ 원룸.title }}</h4>
<p>{{ 원룸.price }}원</p>
</div>

이런식으로 메인페이지에서 상품들을 보여주고

export default {
name: 'App',
data() {
return {
원룸들: data,
모달창열렸니: false,
신고수: [0, 0, 0],
메뉴들: ['Home', 'Shop', 'About'],
products: ['역삼동원룸', '청호동원룸', '마포구원룸'],
product: {},
}
},
methods: {
increase(i) {
this.신고수[i]++;
},
showModal(product) {
this.product = product;
this.모달창열렸니 = true;
},
removeModal() {
this.모달창열렸니 = false;
}
},
components: {
 
}
}

showModal 함수를 이렇게 짜서 product 변수에 클릭한 아이템의 객체를 통째로 넣고 모달창에선

<div class="black-bg" v-if="모달창열렸니 == true">
<div class="white-bg">
<h4>{{ product.title }}</h4>
<p>가격 : {{ product.price }}원</p>
<button @click="removeModal">닫기</button>
</div>
</div>

이런식으로 나오게 해놨습니다. 문제는 위에 이런식으로 하면 제 의도대로 잘 나오는데 메인페이지 상품들 보여주는 코드를 짤때

<h4 @click="showModal(원룸)">{{ 원룸.title }}</h4>

이런식으로 하고 클릭하면 모달창에선 계속 0번째 인덱스 아이템만 보여줍니다.. '원룸'하고 '원룸들[i]' 둘다 찍어보면 같은 객체가 나오는데 왜이러는 걸까요.. showModal 함수를

showModal(product) {
this.product = product;
this.모달창열렸니 = true;
console.log(product);
}

이런식으로 해서 콘솔을 보면 계속 product로 0번째 객체만 넘어옵니다.. 이거 왜 이럴까요?

[codingapple]

그러게요 this.product = {...product};

이렇게 고쳐봅시다 

[김시윤]

this.product = {product}

이렇게 말씀하시는 건가요? 이러면 모달창에서 아예 데이터가 안뜹니다..

[codingapple]

점3개 포함이요 

[김시윤]

똑같이 0번째 객체만 보여지는 현상이 뜨네요.. 그냥

<h4 @click="showModal(원룸들[i])">{{ 원룸.title }}</h4>

이렇게 할까요.. 이러면 제대로 뜨긴 하는데.. 도대체 '원룸'과 '원룸들[i]'가 제가 배운바로는 똑같은데 왜 이런 현상이 뜨는지 모르겠어서 답답하네요..

[codingapple]

왜저럴까요 고민해보도록 하겠읍니다 

[codingapple]

for 반복문의 변수명 영어로 바꿉시다 

[김시윤]

아.. 원룸을 영어로 바꿨더니 정상 작동하네요..!! 감사합니다.

지금은 강의듣느라 변수명을 한국어로 쓰지만 앞으로 개발할 땐 무조건 영어로 해야겠어요ㅠㅠ

[글쓴이]

글