[vuejs] checkbox + pagination + datepicker

내용

리스트에서 제외하고 싶은 row를 선택, 페이징 중에서도 제외로 선택된 row 유지

라이브러리

• Vue.js v2.6.6
• axios v0.18.0
• bootstrap-vue v2.0.0
• vuejs-datepicker v1.5.4

html

<div class="row list-row" v-for="(item, index) in members" :key="index">

    <div class="col-md-1">
            <label class="checkbox">
                <input type="checkbox" @click="excludedToggle(item.memberId)">
                <i class="fa fa-close" v-show="isExcludedId(item.memberId)"></i>
            </label>
    </div>

</div>


<!-- bootstrap-vue v2.0.0 -->
<div class="panel-footer">
    <div class="pull-right">
        <b-pagination
                size="md"
                v-model="params.page"
                v-on:input="search"
                :total-rows="params.pages"
                :per-page="params.limit"
                :limit="11">
        </b-pagination>
    </div>
</div>

css

.list-row {
    padding: 20px;
    border-bottom: solid 1px;
    border-bottom-color: #bbb;
    margin: 0;
}

/*use admin_score_update.jsp*/
label.checkbox {
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 10em;
    height: 10em;
    text-align: center;
}
label.checkbox input {
    opacity: 0;
}
label.checkbox i {
    font-size: 6em;
    line-height: 0;
    top: 50%;
}

js

new Vue({
    el: '#app',
    data() {
        return {
            params: {
                fromInsertDate: '',
                toInsertDate: new Date(),
                fromLoginDate: '',
                toLoginDate: new Date(),

                limit: 10,
                page: 1,
                pages: 0,
                total: 0
            },
            loading: false,
            members: null,
            member: null,
            excludedIds: []
        }
    },
    mounted: function () {
        //this.search(1);
    },
    components: {
        datepicker: vuejsDatepicker
    },
    methods: {
        search: function (page) {
            var self = this;

            axios
                .get('/score/v2/admin_score', {
                    params: {
                        fromInsertDate: self.dateFormatter(self.params.fromInsertDate),
                        toInsertDate: self.dateFormatter(self.params.toInsertDate),
                        fromLoginDate: self.dateFormatter(self.params.fromLoginDate),
                        toLoginDate: self.dateFormatter(self.params.toLoginDate),

                        limit: self.params.limit,
                        page: page
                    }
                })
                .then(function (response) {
                    self.params = response.data.params;
                    self.members = response.data.members;

                    window.scrollTo({
                        top: 0,
                        behavior: "smooth"
                    });
                })
                .catch(function (error) {
                    alert(error);
                });

        },
        dateFormatter(date) {
            if (!date) return '';
              return moment(date).format('YYYY-MM-DD');
        },
        score: function (member){
            if(member == null) return;

            self.loading = true;

            axios
                .post('/score/admin_score', Array.of(member))
                .then(function () {
                    self.loading = false;
                })
                .catch(function (error) {

                    if(error.response.data){
                        console.log(error.response);
                        alert(error.response.data);
                    }else{
                        alert(error);
                    }
                });

        },
        excludedToggle(memberId) {

            if (this.isExcludedId(memberId)) {
                // 배열에서 삭제
                this.excludedIds = this.excludedIds.filter(value => value !== memberId);
            } else {
                // 배열에서 추가
                this.excludedIds.push(memberId);
            }
        },
        isExcludedId(memberId) {
              return this.excludedIds.includes(memberId);
        }

    }
});