vuetify 에서 v-switch 텍스트 색상 변경하는 법

문제

아래처럼 스위치를 통해 접속 상태를 나타내는 요구사항이 있었다.
‘접속 허용중’ 일때는 초록색 텍스트, ‘접속 차단중’ 일때는 빨간색 텍스트로 보여주어야 했다.

스위치는 vuetify 프레임워크에서 제공하는 v-switch 로 간단하게 처리할 수 있었는데
https://v2.vuetifyjs.com/en/components/switches/

공식문서에는 label color 를 변경하는 방법이 따로 나와있지는 않아서 삽질을 했다..

해결

stack overflow 에서 힌트를 얻을 수 있었는데, v-slot:label 을 이용해서 처리할 수 있었다.

<v-row>
  <v-col cols="3">
    <v-switch
      v-model="isNotConnectionAllUser"
      color="red"
      hide-details
      inset
      @change="changeConnectionStatus"
    >
      <template v-slot:label>
        <span v-if="isNotConnectionAllUser === true" class="red--text text--lighten-1"
          >접속 차단중</span
        >
        <span v-else class="light-green--text text--darken-1">접속 허용중</span>
      </template>
    </v-switch>
  </v-col>
</v-row>

...

private isNotConnectionAllUser = false;

위처럼 isNotConnectionAllUser 에 따라 텍스트 css 를 적용해주면 된다.

참고로 v-switch 는 기본이 너비 100% 이므로 빈공간을 클릭해도 switch 가 바뀌는 문제가 있었다.
stack overflow 에서 힌트를 얻었는데, 위처럼 v-col 을 지정해서 해결할 수 있었다.