03.업/15.Vue.js

checkbox 선택 참고

봄날의차 2023. 10. 16. 18:06

vue.js N sprintboot로 작업하기 중에 

- 리스트에서 체크박스로 다중 선택해서 삭제하기

1.****\pages\List.vue : 화면
....
<input type="checkbox" :value="eachdata.key" :id="eachdata.key" v-model="checkedRows" @change="getCheckedItem(eachdata.key)">
....
export default Vue.extend({
.... 선언
  data(){    
    return {      
      contentObject: {} as Content
      , checkedRows: [] as string[]
      , nodata: false
    }
  },
....
  methods:{
....
    
    async delBasBid(){
      console.log(this.checkedRows)
      if (sessionStorage.getItem('login')) {        
        try{
          await this.$axios.post('/***/del', { key: this.checkedRows }); // 선언된 변수에 추가 
          location.reload();
        } catch(error) {
          console.error('delBasBid:', error);        
        }        
      }else{
        alert('로그인이 필요합니다.')
        this.$router.push('/auth/login')        
      }
    },
    getCheckedItem(pro_cd){
      console.log(pro_cd)
      console.log(this.checkedRows);
    },
....  
  }


2.***/***Controller.java 
    @PostMapping("/del")
    public ReturnCode delBasBid(@RequestBody Map<String, Object> checkedRows) {        
        Integer code = 0;
        String msg = "";
        List<String> key_list = (List<String>)checkedRows.get("key");
        System.out.println( key_list .toString());
        try {
            for (String key : key_list ) {
                if(key.length() > 0 ) {
                    code = ***Service.delete(key);
                }
            }
            msg = "삭제되었습니다.";
        }
        catch(Exception ex) {
            code = null;
            msg = ex.getMessage();
            ex.printStackTrace();
        }

        return (code);
    }
    
3.***Service.java
    // deleteBasInf
    public Integer deleteBasInf(String pro_cd) {
        return bidCal.deleteBasInf(pro_cd);
    }

    //deleteBidPriPre
    public Integer deleteBidPriPre(String pro_cd) {
        return bidCal.deleteBasInf(pro_cd);
    }

4.mybatis설정.java
    Integer delete(String key);

5.mapper/***.xml
    <select id="delete" parameterType="***" resultType="Integer">
        DELETE FROM tbl WHERE key= #{key};
    </select>

======================================================

자바스크립트보다 수월하게 작업한 듯 해서 정리했다.