오탈자.MD

오탈자

페이지	줄	원문	수정
60	예제03-08 2행	#list { width:400px; ...	#list { width:600px; ...
64	라이프 사이클 훅 표	create	created
65	그림 03-09	update	updated
88	10행	예제 04-10은 검색어를 입력한 후...	예제 04-09는 검색어를 입력한 후...
122	4행	options : 컴포넌트에서 렌더링할 templet 등을 지정합니다.	options : 컴포넌트에서 렌더링할 template 등을 지정합니다.
170	아래쪽에서 10행	7.3 본 파라미터와 가변 파라미터	7.3 기본 파라미터와 가변 파라미터
224	3번째줄	package.json에서는	webpack.config.js에서는
237	아래쪽에서 4행	CSS 모듈을	CSS 모듈은
253	2번째줄	적절한 적절한 디렉터리에서	적절한 디렉터리에서
358,359	예제 11-36		코드1을 참조하여 변경합니다.
362			책에 UpdatePhoto.vue 의 코드가 실려있지 않습니다. 코드2를 참조해주세요.
479	아래에서 5번째줄	개선됩니다	느립니다

[ 코드 1 ]

다른 페이지를 보다가 새로운 연락처가 추가되면 추가된 연락처를 보여주기 위해 가장 첫번째 페이지로 이동시킵니다. 이때 vuejs-paginate 컴포넌트의 페이지 번호를 함께 바꿔주어야 합니다. 이를 위해 관찰 속성을 이용해 페이지 번호를 함께 바꿔줍니다. 또한 paginate 컴포넌트 DOM을 직접 참조하기 위해 ref 특성을 컴포넌트 사용시 부여해야 합니다.

예제 11-36의 9행을 다음과 같이 변경합니다.

    <paginate ref="pagebuttons"

다음 코드는 예제 11-36의 45,46행 사이에 삽입합니다.  

    watch : {
        'contactlist.pageno' : function(page) {
            this.$refs.pagebuttons.selected= page-1;
        }
    },

[ 코드 2 ]

UpdatePhoto.vue 컴포넌트는 ContactForm.vue와 구조가 유사해서 코드를 싣지 않았습니다. 스타일을 제외한 전체 코드는 다음과 같습니다.
[src/components/UpdatePhoto.vue ]

<template>
<div class="modal">
    <div class="form" @keyup.esc="cancelEvent">
        <form method="post" enctype="multipart/form-data">
        <h3 class="heading">:: 사진 변경</h3>
        <input type="hidden" name="no" class="long" disabled v-model="contact.no" />
        <div>
            <label>현재 사진</label>
            <img class="thumb" :src="contact.photo" />
        </div>
        <div>
            <label>사진 파일 선택</label>
            <label>
                <input ref="photofile" type="file" name="photo" 
                    class="long btn btn-default" />
            </label>
        </div>
        <div>
            <div>&nbsp;</div>
            <input type="button" class="btn btn-primary" value="변 경" 
                @click="photoSubmit()" />
            <input type="button" class="btn btn-primary" value="취 소" 
                @click="cancelEvent" />
        </div>
        </form>
    </div>
</div>
</template>

<script>
import Constant from '../constant';
import { mapState } from 'vuex';

export default {
    name : "updatePhoto",
    computed : mapState([ 'contact' ]),
    methods : {
        cancelEvent : function() {
            this.$store.dispatch(Constant.CANCEL_FORM);
        },
        photoSubmit : function() {
            var file = this.$refs.photofile.files[0];
            this.$store.dispatch(Constant.UPDATE_PHOTO, { no:this.contact.no, file:file });
        }
    }
}
</script>

<style scoped>
......(생략 : 기존 코드와 동일)
</style>