Vue - 이벤트 핸들러 v-on, @click

vue에서 이벤트 처리는
v-on:이벤트명 = " 이벤트 발생 시 실행할 코드 " or
@이벤트명 = " 이벤트 발생 시 실행할 코드" 으로 사용한다.

예를들어 이벤트 핸들러 onclick은 v-on:click = "  " 축약형으로는 @click = "  " 이 되는 것.

 

1. 이벤트 발생 시 실행할 함수는 script태그  export default {   method {  }   }  에 때려넣는다.

2. vue에서는 데이터가 변하면 html에 바로 반영되니까 @click = " 변수++ " 이렇게 쓰면 댐. 

3. 여러가지 이벤트들은 ctrl+space로 확인하자. @mouseover, @drag, @input 등등 많음.

 

<template>
  <div>
    <div class="menu">
      <a v-for="(a,i) in menu" :key="i"> {{ a }} </a>
    </div>
    <div v-for="(a, i) in products" :key="i">
      <h4 :style="color">{{ a }}</h4>
      <p>50만원</p>
      <button @click="increase">허위매물신고</button><span>신고 수 : {{ click }}</span>
    </div>
  </div>
</template>

<script>
    export default {

      name: 'App',
      data(){
        return {
          color : 'color : blue',
          menu : ['Home', 'Shop', 'About'],
          products : ['역삼동 원룸', '천호동 원룸', '마포구 원룸'],
          click : 0,
        }
      },
      methods : {
        increase(){
          this.click++
        },

      },
      components: {

      }
    }
</script>

 

<button @click="click++">허위매물신고</button><span>신고 수 : {{ click }}</span>
<button @click="increase">허위매물신고</button><span>신고 수 : {{ click }}</span>

 

위 코드만 봤을 땐, 두줄 다 같은 결과를 발생시킨다.

 

 

여기서 문제점은 모든 매물의 클릭이벤트 발생시 click값이 동일하게 증가한다는건데,

간단하게 몇줄 수정하면 된다.

 

1. 일단 데이터보관함의 click값을 products 데이터 갯수만큼 배열로 수정

 data(){
    return {
      color : 'color : blue',
      menu : ['Home', 'Shop', 'About'],
      products : ['역삼동 원룸', '천호동 원룸', '마포구 원룸'],
      click : [0,0,0],
    }
  },

 

2. click이벤트 발생시 실행되는 increase함수의 파라미터에 v-for의 i를 활용한 값을 넣고 click데이터도 변경~

    <div v-for="(a, i) in products" :key="i">
      <h4 :style="color">{{ a }}</h4>
      <p>50만원</p>
      <button @click="increase(i)">허위매물신고</button><span>신고 수 : {{ click[i] }}</span>
    </div>

 

3. increase함수에 파라미터 추가

  methods : {
    increase(i){
      this.click[i]++
    },
  },

 

 

화면결과 🔽

 

전체코드 🔽

<template>
  <div>
    <div class="menu">
      <a v-for="(a,i) in menu" :key="i"> {{ a }} </a>
    </div>
  
    <div v-for="(a, i) in products" :key="i">
      <h4 :style="color">{{ a }}</h4>
      <p>50만원</p>
      <button @click="increase(i)">허위매물신고</button><span>신고 수 : {{ click[i] }}</span>
    </div>
  </div>
</template>

<script>
    export default {

      name: 'App',
      data(){
        return {
          color : 'color : blue',
          menu : ['Home', 'Shop', 'About'],
          products : ['역삼동 원룸', '천호동 원룸', '마포구 원룸'],
          click : [0,0,0],
        }
      },
      methods : {
        increase(i){
          this.click[i]++
        },

      },
      components: {

      }
    }
</script>

<style>
	//생략
</style>