Vue 이벤트 핸들러로 click 감지하기 (허위매물 신고버튼)

오늘의 5분 숙제 : 

모든 상품에 신고버튼과 기능을 만들어오십시오.

상품마다 각각 신고수를 따로 집계해야합니다. 그래서 신고수 3개를 각각 저장할 공간이 미리 필요하겠군요.

<div v-for="(a,i) in products" :key="i">
  <h4>{{products[i]}}</h4>
  <p>50만원</p>
</div>

어떤 HTML 요소를 클릭했을 때 뭔가 일이 일어나게 만들고 싶으면 

<div onclick=""> 이 안에 자바스크립트를 집어넣습니다. 

Vue에서는 살짝 다르게 집어넣으면 됩니다. @click="" 이걸 집어넣으면 됩니다.

문법만 설명하면 다음날 다 까먹을게 분명하니

저번시간까지 만들던 부동산 사이트에 허위매물 신고버튼과 기능을 만들어보며 배워봅시다. 

허위매물 신고버튼과 신고수를 만들어봅시다

일단 저번시간 반복문 돌린건 복잡해보이니까 다시 원래대로 복구시킵니다.

<div>
  <h4>{{products[0]}}</h4>
  <p>50만원</p>
</div>
<div>
  <h4>{{products[1]}}</h4>
  <p>50만원</p>
</div>
<div>
  <h4>{{products[2]}}</h4>
  <p>50만원</p>
</div>

우리같은 빡대가리들은 간단한걸 좋아하기 때문입니다.

여기다가 버튼을 하나 추가해보자는겁니다. 

<div>
  <h4>{{products[0]}}</h4>
  <p>50만원</p>
  <button>허위매물신고</button>
  <span>신고수 : 0</span>
</div>

이거 버튼을 누르면 옆에 있는 신고수가 1 증가하는 기능을 만들어볼겁니다.

그러려면 어떻게 해야할지 생각해봅시다.

일단 신고수를 기록할 수 있는 변수나 데이터가 하나 필요하지 않을까요?

data(){
  return {
    신고수 : 0,
  }
}

<div>
  <h4>{{products[0]}}</h4>
  <p>50만원</p>
  <button>허위매물신고</button>
  <span>신고수 : {신고수}</span>
</div>

1. 그래서 하단에 데이터를 하나 만들고 2. 데이터를 HTML란에 꽂아넣었습니다.

이제 버튼을 누르면 신고수라는 데이터를 1증가시키면 신고수가 1이 되고 HTML도 재렌더링이 되고

원하는 기능이 완성될 것 같습니다.

버튼을 누르면 기능을 실행하고 싶은 경우

자바스크립트는 onclick="" 이라는 이벤트 핸들러를 HTML태그에 달았지만

Vue에서는 @click="" 이라고 사용합니다.

그럼 안에다가 자바스크립트를 자유롭게 입력가능합니다. 

<div>
  <h4>{{products[0]}}</h4>
  <p>50만원</p>
  <button @click="신고수++">허위매물신고</button>
  <span>신고수 : {신고수}</span>
</div>

이거 버튼을 누르면 신고수라는 데이터를 +1 해주고 싶어서 저렇게 작성했습니다.

그럼 버튼 누를 때마다 신고수가 +1 됩니다. 끝!

신고수++

신고수+=1

아무렇게나 작성할 수 있습니다.

@click 말고 다른 이벤트 핸들러도 만들 수 있습니다.

@mouseover 하면 클릭이 아니라 마우스만 댔을 때 자바스크립트를 실행가능하고

@input 하면 인풋에 값을 입력했을 때 자바스크립트를 실행가능하고

님들이 알던 이벤트명을 자유롭게 기입해주면 됩니다. 모르면 어쩔 수 없이 @click이나 씁시다. 

코드가 길 경우 함수를 만들어씁니다

긴 코드를 짧게 축약해주는게 바로 함수문법입니다.

그래서 @click 안에 들어갈 말이 너무 길다면 함수를 만들어서 집어넣으십시오.

함수 만드는 자리는 이미 정해져있습니다. 밑에서 methods : {} 라는 항목을 신설해주면 됩니다. 

data(){
  return {
    신고수 : 0,
  },
}

methods : { 
  increase(){ 
    this.신고수 += 1 
  } 
}

methods라는 항목을 만드신 후

함수를 안에다가 계속 만들어낼 수 있습니다. 함수만들 땐 함수이름(){} 이게 끝입니다.

그리고 이건 꼭 기억해야하는 부분인데

여기서 데이터를 가져다쓰고 싶으면 꼭 this.데이터이름 이라고 사용해야합니다.

this는 그냥 위에 있는 데이터와 함수를 담은 큰 object라고 생각하시면 되겠습니다. 

그리고 아까 HTML 부분에서 함수를 자유롭게 사용하면

아까 축약했던 this.신고수+=1 이게 실행됩니다. 끝 

<div>
  <h4>{{products[0]}}</h4>
  <p>50만원</p>
  <button @click="increase()">허위매물신고</button>
  <span>신고수 : {신고수}</span>
</div>

함수() 이렇게 하셔도 되고

함수이름만 쓰셔도 됩니다. @click="increase" 이렇게요. 

함수는 한글로 작명하면 잘 안될 수 있습니다.