Vue.jsのwarningの解消方法を教えてください

Question

###Vue.jsに関するwariningの解消方法について
Vue.jsで勉強を目的とした簡単なアプリケーションを作っています。
その過程で、開発者ツールのコンソールでwarningが表示され、それを解消しようと試みますが、解消されません。

実現したいこと

warningを解消したい。

###発生している問題・エラーメッセージ

[Vue warn]: Invalid prop: type check failed for prop "value". Expected Boolean, got String with value "これはテストです".

###該当のソースコード

<!-- alert.vue -->

<!-- アラート -->
<template>
  <div>
    <v-alert
      v-model="alertMessage"
      outlined
      :type="type"
      :color="color"
      dismissible
    >{{ alert }}</v-alert>
  </div>
</template>

<script>
export default {
  name: 'Alert',
  props: {
    alert: String,
    color: String,
    index: Number,
    type: String
  },
  computed: {
    alertMessage: {
      get() {
        return this.alert;
      },
      set() {
        if (this.$listeners && this.$listeners.removeAlert) {
          this.$emit('removeAlert', {
            type: this.type,
            index: this.index,
          });
        }
      },
    },
  }
};
</script>

<!-- input.vue -->
<template>
  <div class="input">
    <alert
      v-for="(alert, index) in alerts.error"
      type="error"
      :key="`error${index}`"
      :alert="alert"
      :index="index"
      @removeAlert="removeAlert"
    ></alert>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import Alert from '@/components/common/alert';

export default {
  name: 'Input',
  computed: {
    ...mapState('alert', [
      'alerts',
    ])
  },
  mounted() {
    this.load();
  },
  methods: {
    ...mapActions('alert', [
      'addAlert',
      'removeAlert'
    ]),
    load() {
      this.addAlert({ type: 'error', message: 'これはテストです' });
    }
  },
  components: {
    Alert
  }
};
</script>

const ADD_ALERT = 'ADD_ALERT';
const REMOVE_ALERT = 'REMOVE_ALERT';
const CLEAN_ALERT = 'CLEAN_ALERT';

export default {
  namespaced: true,
  state: {
    alerts: {
      success: [],
      error: [],
    },
  },
  actions: {
    addAlert({ commit }, { type, message }) {
      commit(ADD_ALERT, { type, message });
    },
    removeAlert({ commit }, { type, index }) {
      commit(REMOVE_ALERT, { type, index });
    },
    cleanAlert({ commit }) {
      commit(CLEAN_ALERT);
    }
  },
  mutations: {
    [ADD_ALERT](state, payload) {
      const { type, message } = payload;
      state.alerts[type].push(message);
    },
    [REMOVE_ALERT](state, payload) {
      const { type, index } = payload;
      state.alerts[type].splice(index, 1);
    },
    [CLEAN_ALERT](state) {
      state.alerts = {
        success: [],
        error: [],
      };
    }
  },
};

###試したこと
warningではpropsの型としてboolean型ではないというものなので、Vue.jsの公式やその他記事を確認し、propsの型指定など試してみました。
input.vueの中になるコードthis.addAlert({ type: 'error', message: 'これはテストです' });ここのこれはテストですをtrueなど、booleanの型にすると、warningは解消されることは確認済みです。

現状

目的としてはアラートを出したいので、文字列を渡したいので、this.addAlert({ type: 'error', message: 'これはテストです' });この形で行きたいと思っています。
ただし、そうするとやはりwarningが出てしまい解消に至りません。

どのように解消するべきか、お分かりの方がいれば教えてください。

###補足情報(言語/FW/ツール等のバージョンなど)
Vue.js / Vuex / Vuetify

Vue.jsのバージョン 2.6.11
Vuexのバージョン 3.5.1
Vuetifyのバージョン 2.3.6

Answer 1

警告メッセージが表示されるのは、v-alertコンポーネントのv-modelに文字列を指定しているためです。
v-modelにはboolean型の値を指定します。trueだとアラートを表示、falseだと非表示になります。

<v-alert
      v-model="alertMessage"
      outlined
      :type="type"
      :color="color"
      dismissible
    >{{ alert }}</v-alert>

警告メッセージを解消するにはv-model="..."の記述を削除するか(アラートの状態を管理する必要がなければ）、v-modelにboolean型のpropsを指定します（アラートの状態を管理する必要があれば）。

<v-alert
      outlined
      :type="type"
      :color="color"
      dismissible
    >{{ alert }}</v-alert>

具体的なコードはオフィシャルサイトのドキュメントにありますのでご確認ください。
Twitter アラート

Comments

[souta-haruran]

ありがとうございました！
> v-modelにはboolean型
なるほど、勉強不足でした。
この経験を踏まえ学習します。