Vuetify의 v-messages

Vuetify에는 v-messages라는 메시지 표시의 구성 요소가 있습니다.v-text-field 등으로 error-messages 또는 success-messages를 설정하면 v-messages 구성 요소를 사용하여 표시됩니다.
그러나 v-messages 자체는 공식 사이트 문서에 설명이 없습니다.
일반적으로 다른 컴포넌트에 포함된 형태로 사용되기 때문입니다.
그래도 v-messages 단독으로 사용하고 싶을 수도 있습니다.
이번은 v-messages 단체로의 사용법을 정리했습니다.

사용하는 Vuetify는
v2.2.1
입니다.

$ vue create my-app
$ cd my-app/
$ vue add vuetify
$ npm run serve

src/components/HelloWorld.vue를 다시 씁니다.v-messages의 props에는 value가 있습니다.
중요한 점은 value로 전달되는 데이터가 문자열 배열입니다 .
참조 ( node_modules/vuetify/src/components/VMessages/VMessages.ts )

src/components/HelloWorld.vue

<template>
  <v-container>
    <v-row>
      <v-col>
        <v-img
          :src="require('../assets/logo.svg')"
          class="my-3"
          contain
          height="200"
        ></v-img>
      </v-col>
    </v-row>
    <v-row>
      <v-col>
        <v-messages :value="messages"></v-messages>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: 'HelloWorld',

  data: () => ({
    messages: [
      'Hello!!',
      'Good Bye!!',
      'Good Night.'
    ]
  }),
};
</script>

$ npm run serve

Have a good Vuetify life