[vue] image import error처리, 멀티 버튼 이벤트 처리

1.image import error처리

뷰에서 컴포넌트에서 sass, css 사용시 img src=""경로주소를 입력해도 화면에서 안 뜨고 에러가 나는 경우가 있다. 

This relative module was not found: ~~~~

다른 곳에는 나오는데 해당페이지에서 계속 에러가 나는 경우

아래와 같은 방식(~@)으로 해결 할 수 있다.

src="~@/assets/images/popup-wallet.svg"

2.multi button event handler

위와 같이 각각의 버튼 클릭시 열렸다가 닫히는 기능을 구현하고자 할때 어떻게 이벤트를 처리해야하나??

멀티 인풋처럼, 네임을 지정해줘서 처리를 해야하는가??

통상 토글이벤트 구현시, 단일은 script부분에서 data에 button: false 이런식으로 값줘서 html에 v-if문으로 토글을 하는데,

여러개인 경우는 배열에 버튼 갯수만큼 [false,false....]만들어 놓고, 버튼 클릭시 해당 배열의 값만 true로 바꿔주면 된다.

<template>
    <div class="wallet-box walletClose" @click="onOpenWalletBox(index)" v-if="!countList[index]" v-bind="eachClickEvent">
    <div class="wallet-box walletOpen" @click="onOpenWalletBox(index)" v-else >
</template>
  
  
  data(){
  	return {
    	 countList : [],
    }
  }
  
  onOpenWalletBox: function(index){
    this.$set(this.countList, index, !this.countList[index])
  },

countList[false,false...]를 처음에 셋팅하기 위해서 아래와 같이 작성했다. 

mounted(){
  eachClickEvent(){
      let numbers = Object.keys(this.groupedWallets).length;
      for(let i=0; i<numbers; i++){
         this.countList.push(false);
      }
  },
}