[Udemy Vue 완벽가이드 Section16] 250. 수신 요청(메시지) 출력하기

일단 단순하게 모든 요청을 표시해보자.

 

script에는 Vuex에 액세스하기위해 computed 프로퍼티를 사용하자.

현재는 거기에 있는 모든 요청을 가져오자.

// RequestsReceived.vue
computed: {
  receivedRequests() {
    return this.$store.getters['requests/requests'];
  },
  hasRequests() { //v-if를 이용해 true인 경우 ul을 표시하고, false인 경우 h3태그
   return this.$store.getters['requests/hasRequests'];
  }
}

 

// requests > getters.js
export default {
   requests(state) {
     return state.requests;
   },
   hasRequests(state) {
     return state.requests && state.requests.length > 0; //request가 1개 이상이면 true
   },
};

 

<!--RequestsReceived.vue-->
<section>
  <base-card>
    <header>
      <h2>Requests Received</h2>
    </header>
    <ul v-if="hasRequests">
      <request-item
        v-for="req in receivedRequests"
        :key="req.id"
        :email="req.userEmail"
        :message="req.message"
      ></request-item>
    </ul>
    <h3 v-else>You haven't received any requests yet!</h3>
  </base-card>
</section>

 

ul에서 여러 list 항목을 렌더링해야한다.

그러나 구체적인 항목은 새로운 컴포넌트로 내보내자.

 

components 폴더 > requests 폴더 추가 > RequestItem.vue파일 추가

<template>
  <li>
    <div>
      <a :href="emailLink">{{ email }}</a>
    </div>
    <p>{{ message }}</p>
  </li>
</template>
<script>
export default {
  props: ['email', 'message'],
  computed: {
    emailLink() {
      return 'mailto:' + this.email; //브라우저가 이해할 수 있는 특수한 지시.
    },
  },
};
</script>

 

'mailto' + this.email;

a 태그의 link인 경우, 브라우저가 자동으로 이메일 클라이언트를 실행하게 되며, 열리는 새 이메일에는 this.email주소가 입력된 채로 표시된다.

 

RequestsReceived.vue로 돌아가서 이 컴포넌트를 지역 컴포넌트로 등록.

<request-item
  v-for="req in receivedRequests"
  :key="req.id"
  :email="req.userEmail"
  :message="req.message"
></request-item>

 

다 작성하고, request에 적힌 이메일주소를 클릭하면, 해당 이메일 주소가 입력된 상태로 이메일 작성창이 실행된다.

 

지금은 모든 코치들의 요청이 항상 표시된다.

이건 우리가 원하는 방식이 아니다.

 

이를 제한해보자.

루트 state에 보면 우리가 사용자라는 가정 하에 이미 userId가 있다.

따라서 등록한 코치의 id는 'c3'가 된다.

import { createStore } from 'vuex';
import coachesModule from './module/coaches/index.js';
import requestsModule from './module/requests/index.js';

const store = createStore({
  modules: {
    coaches: coachesModule,
    requests: requestsModule,
  },
  state() {
    return {
      userId: 'c3',
    };
  },
  getters: {
    userId(state) {
      return state.userId;
    },
  },
});

export default store;

 

해당 코치에게 보낸 메시지만 Requests페이지에 보여야한다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.