10/20

Vueインフラストラクチャコースの復習

Ref : https://www.inflearn.com/course/vuejs/

1. $nextTick()

//Card.vue
 <header slot="header" class="cardView__header">
   		//1. isEditTitle === true
                <b-form-input
                    v-model="inputTitle"
                    placeholder="타이틀을 입력하세요:-)"
                    class="cardView__inputTitle"
                    v-if="isEditTitle"
                    ref="inputTitle"
                ></b-form-input>
		//2. isEditTitle === false
                <span class="cardView__title" v-else @click="setEditTitle">
			{{card.title}}
              	</span>
</header>

//Card.vue methods
setEditTitle() {
            this.isEditTitle = true;
            this.inputTitle = this.card.title.trim();
            //this.$refs.inputTitle.focus(); //1.
            this.$nextTick(() => {	     //2.
                this.$refs.inputTitle.focus();
            });
}

//Card.vue
onEditCard() {
            const listId = this.card.listId;
            const title = this.inputTitle.trim();
  	   //1.
            const description = this.inputDesc.length ? this.inputDesc.trim() : null;
            const id = this.cid;

  	   //2.
            if (!this.inputTitle.length) {
                alert("카드 제목을 입력해주세요!");
              	//3.
                this.inputTitle = this.card.title;
                this.$nextTick(() => this.$refs.inputTitle.focus());
                return false;
            }

  	    //4. 
            this.UPDATE_CARD({ id, title, listId, description })
                .catch((err) => console.error(err))
                .finally(() => {
             	 this.restoreEdit();
              	 //7.
              	 this.fetchData();
            });
        },

//actions.js
UPDATE_CARD({ dispatch, state }, { id, title, description, listId, pos }) {
  	//5.
        const payload = { title, description, listId, pos };
  
        return api.card
            .update({ id, payload })
            .then(() => {
          	//6.
                dispatch("FETCH_BOARD", { id: state.board.id });
            })
            .catch((err) => Promise.reject(err));
    },
          

3.カードのドラッグ＆ドロップを実施する

//List.vue
 <draggable
            class="list-item__cardList list-group" //1.
            :list="data.cards"			   //2.
            :data-list-id="data.id"
            draggable=".card-item"		   //3.
            group="cardItem"			   //4.
            @end="onEnd"			   //5.
        >
            <card-item
                v-for="card in data.cards"
                :data="card"
                :key="card.pos"
            />
        </draggable>

onEnd(event) {
  	    //1. 2.
            const { to, item } = event;

            const listId = to.dataset.listId;

            const currentCard = {
                id: item.dataset.cardId * 1,
                pos: 65535,
                listId: listId * 1,
            };
        },

//AddCard.vue
const pos = this.getPos();

getPos() {
  	    //1.
            const list = this.board.lists.filter(
                (b) => b.id === this.listId
            )[0];
  	    //2.
            const lastCard = list.cards[list.cards.length - 1];
  	    //3.
            return lastCard ? lastCard.pos * 2 : 65535;
        }

* Reference

1. Vue.nextTick : https://kr.vuejs.org/v2/api/index.html#Vue-nextTick