配列のエラー$errors->get(‘files.*’)をvue.jsで一覧表示する方法

2022 8/28

2022年6月24日 2022年8月28日

複数ファイルを投稿時のバリデーションエラーをvue.jsのcomponentに渡します。

propsで下記のようなイメージです。

    @if($errors->has('files.*'))
    :errors-files="{{ Js::from($errors->get('files.*')) }}"
    @endif

このエラーはcomponentのpropsとして下記のように受け取ります。

  props: {
    errorsFiles: {
      type: Object,
      default: function () {
        return {}
      }
    },

このとき、default値が書き方が少し特殊です。

通常だと下記のように書きたくなりますが、これだとエラーになります。

  props: {
    errorsFiles: {
      type: Object,
      default: {}
    },

そのため、関数にしてreturnをしています。

      default: function () {
        return {}
      }

配列のエラーですが、今回は多次元配列です。

$errors->get('files.*') // 要素ごとにエラーを持つ

今回はその多次元配列を通常の配列にします。

つまり、ObjectからArrayに変換します。

ObjectはforEach()メソッドを持たないため、Object.entriesで繰り返し処理を今回します。

      for (const [key, value] of Object.entries(対象のObject)) {
        // 繰り返し処理
      }

今回はfiles.*で要素ごとにエラーの配列を持ちます。

なので、flat()を利用してエラーの配列を1階層にします。

この繰り返し処理を利用して、配列を生成します。

    // ObjectをArrayに変換
    arrayFlat(object){
      if(!object) return []; // エラーがないときは空配列を返す
      let arrayValues = [];  // エラーを格納するための配列
      // 繰り返し処理で各要素のエラー配列を追加していく。
      for (const [key, value] of Object.entries(object)) {
        arrayValues.push(value);
      }
      // flat()で配列を展開して、1階層にエラー文をまとめる。
      // [...new Set()]でエラー文の重複なしの配列を生成
      return [...new Set(arrayValues.flat())];
    },

これでエラー文の配列を生成できました。

  data() {
    return {
      flatErrorsFiles: this.arrayFlat(this.errorsFiles),
    }
  },

あとは繰り返し処理をして、エラーメッセージを表示します。

        <ul class="errors-ul">
          <li class="error-li" v-for="message in flatErrorsFiles" :key="message" >
              {{ message }}
          </li>
        </ul>

これで以上となります。