코딩애플 Vue3 직방, 인스타그램 웹앱 --4 onclick

이벤트 핸들러 관련중 빈번한 버튼 클릭시 처리방법

고전적 자바스크립는 onclick="" 였으나.

vue에서는 @click=''" 임..

 

버튼을 누르면 관련된 데이터만  +1만 해주면됨....vue는 실시간 랜더링이 됨으로...

<div>
  <h1>{{ logo }}</h1>
  <div v-for="(a,i) in products" :key="i" :style="inStyle">
    <h4 :style="style">{{ i+1}}. {{ products[i] }}</h4> &nbsp;
    <p > {{ price[i] }} 만원</p> &nbsp;
    <button @click="신고수++">허위매물신고</button>&nbsp;<span>신고수 : {{ 신고수 }}</span>
  </div>  
</div>
//그럼 데이터 추가.
data(){
    return{
      신고수 : 0,
      메뉴들:['Home', 'Shop','About'],
      //데이터 보관함...object자료로 저장 key:value 형식     
      logo : '원룸샾',
      style : 'color:red;font-size:20px;',
      products : ['역삼동원룸','천호동원룸','마포구원룸'],
      price :[50,60,80],
      inStyle :'display: inline-flex;align-items: center;',
    }
  },

태그에 스타일 넣는 것은 응용임!!!!...스타일에는 {{ }} 넣는게 아니라 그냥 명칭을 넣는다는것. 주의

여기서 응용.....한번에 다 넣으면 안되지 않습니까???ㅋㅋ

<div v-for="(a,i) in products" :key="i" :style="inStyle">
    <h4 :style="style">{{ i+1}}. {{ products[i] }}</h4> &nbsp;
    <p > {{ price[i] }} 만원</p> &nbsp;
    <button @click="신고수[i]++">허위매물신고</button>&nbsp;<span>신고수 : {{ 신고수[i] }}</span>
 </div>  
 //
 신고수 : [0,0,0],

이렇게 변경하니

각각의 신고수도 별도로 카운트 되었다...우와!!!!!!!!

 

함수를 추가할수도 있다.

함수를 넣는 위치는 정해져 앴다. export default 의 data와 components사이에 methods 영역을 추가하면된다. 다른된 안됨.

신고수 증가 함수를 넣고자 했는데 methods영역에 읽지 못했다....this를 써줘야 한다...

<div v-for="(a,i) in products" :key="i" :style="inStyle">
    <h4 :style="style">{{ i+1}}. {{ products[i] }}</h4> &nbsp;
    <p > {{ price[i] }} 만원</p> &nbsp;
    <button @click="increase2(i)">허위매물신고</button>&nbsp;<span>신고수 : {{ 신고수[i] }}</span> &nbsp;
    <button @click="increase">함수연습</button>
</div>  

//메소드 영역
export default {
  name: 'App',
  data(){
    return{
      신고수 : [0,0,0],
      메뉴들:['Home', 'Shop','About'],
      //데이터 보관함...object자료로 저장 key:value 형식     
      logo : '원룸샾',
      style : 'color:red;font-size:20px;',
      products : ['역삼동원룸','천호동원룸','마포구원룸'],
      price :[50,60,80],
      inStyle :'display: inline-flex;align-items: center;',
    }
  },
  methods : {
    increase(){
      alert(" 함수 연습");
    },
    increase2(i){
      this.신고수[i]++
    }
  },

  components: {

  }
}

alert도 나오고 카운트도 되었다.... 데이터 전달도 이런식으로 할수 있는것이 고무적이다..ㅋㅋㅋㅋ 좀더 간편한듯함.

숙제는 3가지 원룸에 모두 허위매물신고 버튼을 만드는 것이였다.....이건 이미 했으니깐 숙제가 없다!!!! 아이좋아..ㅋㅋㅋㅋ