글 발행기능

글 발행을 하려면 발행버튼을 먼저 만들어주고,

<li @click="publish" v-if="step == 2">발행</li>

publich함수를 작성해준다.

publish(){
      var 내게시물 = {
        name: "John Doe",
        userImage: "https://placeimg.com/200/200/people",
        postImage: this.이미지,
        likes: 20,
        date: "Apr 20",
        liked: false,
        content: this.발행할글,
        filter: "clarendon"
      };
      this.instadata.unshift(내게시물);
      this.step = 0;
}

기존 글과 같은 형태인 내 게시물이란 오브젝트를 만들어서, 원래 있던 data인 this.instadata에 unshift를 이용해서 맨앞으로 오게 뒷 내용을 밀어넣으면 된다. 그러면서 this.step으로 페이지 이동도 하게 해줄 수 있다.

이미지는 해당App.vue파일에 있으므로 this.이미지 하면 되지만,

content는 Container.vue에서 생긴 글 이므로 custom event에서 생긴 글 이므로 받아와야 한다.

글을 작성하는 input태그 (여기선 textarea태그)에

<textarea class="write-box" @input="$emit('postContent',$event.target.value)" >write!</textarea>

위처럼 @input 글이 다입력되고 커서가 다른 곳을 누를 때, 부모로 보내는 $emit을 써서 postContent라는 이름으로 

$event.target.value즉 자기의 입력값을 data로 보내준다.

 

받는 곳에서는

<Container @postContent="발행할글=$event" :instadata="instadata" :step="step" :이미지="이미지"/>

이렇게, @작명="코드" 를 입력하는데, 발행할글 이란 빈 data를 만들어서 $event(자식이 보낸 값을 가지고 있음)을 넣어주고, content에 this.발행할글 을 써주면 된다.