[Vue]3. v-on 이벤트 핸들러 / 함수만들기

이벤트 핸들러

자바스크립트에서 인라인으로 이벤트를 실행하려면 <태그> 넣어야 했다.

Vue에서 이벤트 핸들러 실행하기

• v-on:event="코드"
• @event="코드"

<!--버튼을 누르면 이벤트 실행-->
<button v-on:click="console.log('누름')">버튼</button>
<button @click="console.log('누름')">버튼</button>

---

함수만들기

코드가 길어지면 함수에 넣어서 실행하면 된다!
🤫 어디에 만들어...?
👉<script>태그 안에 methods에 만들면 된다!
주의: 함수안에서 data(){}에 저장한 데이터를 쓰려면 데이터명 앞에 this를 붙여야 한다!

<script>
  export default {
    name: "App",
    data() {
      return {
        메뉴들: ["Home", "Shop", "About"],
        products: [
        { name: '역삼동원룸', price: '50'},
        { name: '천호동원룸', price: '20'},
        { name: '마포구원룸', price: '40'}
        ],
        num = 0
      };
    },
    methods: { // 여기에 함수를 저장한다! -> 함수명(){코드}
		numAdd(){
          this.num += 1;
    },
    components: {},
  };
</script>

예제

버튼을 누르면 각 버튼의 수가 증가한다.

<template>
  <div>
    <div v-for="( ele, idx ) in products" :key="idx">
      <h4>{{ products[idx].name }}</h4>
      <p>{{ ele.price }}만원</p>
      <button v-on:click="btnNum(idx)">허위매물신고</button>
      <span>신고수: {{ num[idx] }}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        num : [1,2,0], // 신고수를 저장할 변수
        products: [
        { name: '역삼동원룸', price: '50'},
        { name: '천호동원룸', price: '20'},
        { name: '마포구원룸', price: '40'}
        ]
      };
    },
    methods: {
      btnNum(idx){ 
      	this.num[idx] += 1;
      }
    },
    components: {},
  };
</script>