TIL. Vue.js [화면 내 component전환]

Vue.js [화면 내 component전환]

다음 사진들 처럼 약관 관리 - 운영툴을 만드는 과정에서 카테고리에 따라 페이지의 이동 없이 화면 내의 렌더되는 컴포넌트가 바뀌어야했다.

vue에서도 jsx문법을 지원 한다고 하여 React에서 처럼 삼항연산자의 조건을 통해서 렌더되는 컴포넌트를 달리하고자 하였다.

하지만, html태그를 바로 삼항연산자에 넣는 것은 기능이 작동하지 않아서 이벤트 핸들링을 통해 구현하는 방법으로 화면 내 component전환을 구현하였다.

사실 말이 "화면 내 component전환"이지 v-if: , v-else-if: v-else: 를 이용하여 손쉽게 구현할 수 있었다.

먼저, 카테고리에 따라 분류가 되어야하기 때문에 각 카테고리가 클릭될 때 1, 2, 3라는 값을 data의 "category" 에 저장한다.

template

	<ul class="select-list">
          <li @click="fetchData(1)">
            <span :class="{ active: selected == 1 }">약관 내용 관리</span>
          </li>
          <li @click="fetchData(2)">
            <span :class="{ active: selected == 2 }">약관 분리 관리</span>
          </li>
          <li @click="fetchData(3)">
            <span :class="{ active: selected == 3 }">약관 작성</span>
          </li>
        </ul>

script

data() {
    return {
      category: 0,
      ...
      
        methods: {
   	 fetchData(sel) {
     	 this.category = sel;
        }
          ...
          

이렇게 data의 "category"의 값을 클릭이벤트가 일어날 때, 바꿔주었고,

      <div class="content-container">
        <ManagementCtn v-if="this.selected == 1" />
        <classifyDetail v-else-if="this.selected == 2" />
      </div>

그 값(1, 2, 3)을 조건으로 삼아 렌더되는 컴포넌트를 다르게 해주었다.