[Udemy Vue 완벽가이드 Section11] 147. 커스텀 컨트롤 컴포넌트 구축하기

지금까지는 내장된 input요소를 가지고 작업했다.

하지만 가끔은 커스텀 요소가 필요할 때가 있다. 그러니 커스텀 요소를 직접 만들어보자.

components 폴더에 RatingControl.vue 파일을 만들자.

유저는 이 요소를 사용해서 평가를 할 수 있다.

 

RatingControl.vue

<template>
  <ul>
    <li>
      <button type="button" @click="activate('poor')">Poor</button>
    </li>
    <li>
      <button type="button" @click="activate('average')">Average</button>
    </li>
    <li>
      <button type="button" @click="activate('great')">Great</button>
    </li>
  </ul>
</template>
<style scoped>
ul {
  list-style: none; /*스타일링 제거*/
  margin: 0.5rem 0;
  padding: 0;
  display: flex;
}
li {
  margin: 0 1rem;
  border: 1px solid #ccc;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
button {
  font: inherit;
  border: none;
  background-color: transparent;
  cursor: pointer;
}
</style>

이제 이 RatingControl 커스텀 컴포넌트를 form에서 사용해보자.

TheForms.vue에서 RatingControl을 지역컴포넌트로 등록하고 사용하자.

<rating-control></rating-control>

 

 

## button클릭 시, 양식 제출 막기 → type="button"

이제 평가 버튼이 생겼다.

form내의 버튼이므로, 버튼을 클릭하면 submit이 된다(양식을 제출하게된다.)

이 현상을 막기위해, RatingControl.vue 파일에서 button요소에 type속성을 'button'으로 추가하자.

그러면 버튼이 form태그 안에 있더라도, 클릭 시 양식이 제출되지 않는다.

 

 

유저가 선택하는 요소는 강조표시되게 해보자.

<template>
  <ul>
    <li :class="{ active: activeOption === 'poor' }">
      <button type="button" @click="activate('poor')">Poor</button>
    </li>
    <li :class="{ active: activeOption === 'average' }">
      <button type="button" @click="activate('average')">Average</button>
    </li>
    <li :class="{ active: activeOption === 'great' }">
      <button type="button" @click="activate('great')">Great</button>
    </li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      activeOption: null,
    };
  },
  methods: {
    activate(option) {
      this.activeOption = option;
    },
  },
};
</script>
<style scoped>
.active {
  border-color: purple;
}

.active button {
  color: purple;
}
</style>

저장 후 애플리케이션을 보면, 사용자가 옵션을 선택할 때마다 선택된 옵션이 강조표시된다.

 

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