axiosで取得した配列内の文字列を判定し、vue内のdataの真偽値を変更したい

Question

前提・実現したいこと

Nuxt内の環境で以下の動作の実現ができず困っています。

実現したいことは、vue内でボタンをクリックした際にjsonから帰ってきた配列内のエラーコード（string）を判定して、vueのデータの更新を行おうとしています。
なお、本来はvue側からparameterの送信やAPIとの連携を行いますが、ここではサンプルとしてjsonを用いてエラーコードの判定だけ質問させていただきます。

現在行っていることは、vueでaxiosを用いて非同期で配列を取得し、配列の中身と名前が等しいvue内のdataをfalseからtrueに変更してv-ifでエラーメッセージを表示しようとしています。
以下にサンプルのコードを記載させていただきますが、methodsのvalidateForm内でどのように書けばよいか分からず、困っています。

どなたかよい方法がありましたら、アドバイスいただけますでしょうか。

該当のソースコード

<template>
  <section class="sample">
     <div class="error-wrapper" v-if="hasSystemError">
        <p class="error-title">エラーサンプル</p>
        <div class="error-inner-wrapper">
           <p class="error-text" v-if="errors.ERROR_1">エラー1</p>
           <p class="error-text" v-if="errors.ERROR_2">エラー2</p>
           <p class="error-text" v-if="errors.ERROR_3">エラー3</p>
           <p class="error-text" v-if="errors.ERROR_4">エラー4</p>
           <p class="error-text" v-if="errors.ERROR_5">エラー5</p>
        </div>
     </div>
     <button type="button" @click="validateForm">
  </section>
</template>

<script>
export default {
  name: 'sample',
  data() {
    return {
      hasSystemError: false,
      errors: {
        ERROR_1: false,
        ERROR_2: true,
        ERROR_3: false,
        ERROR_4: false,
        ERROR_5: false
      },
    }
  }
  methods: {
    validateForm() {
      let url
      switch (this.$router.currentRoute.query.response) {
        default:
          url = '/data-sample/sample/index-response.json'
      }

      this.$axios.get(url).then(response => {
        console.log(response.data.errors) // ["ERROR_1","ERROR_3","ERROR_4"]
        // ここで取得したエラーコードを判定して、同じthis.data.errors以下のフラグをtrueにしたいです。
        // この場合、this.errors.ERROR_1 / 3 / 4だけtrueに変更し、エラーメッセージを表示したいです。
      })
    }
　}
}
</script>

<style scoped>
</style>

以下が取得する配列を記述したjsonファイルです。

{
  "errors": [
    "ERROR_1",
    "ERROR_3",
    "ERROR_4"
  ]
}

補足情報（FW/ツールのバージョンなど）

Nuxtとaxiosのバージョンは以下です。

"@nuxtjs/axios": "^5.3.6",
"nuxt": "^2.4.0",

Answer 1

こんな感じでどうでしょうか？

<template>
  <section class="sample">
     <div class="error-wrapper" v-if="hasSystemError">
        <p class="error-title">エラーサンプル</p>
        <div class="error-inner-wrapper">
           <p class="error-text" v-if="errors.ERROR_1">エラー1</p>
           <p class="error-text" v-if="errors.ERROR_2">エラー2</p>
           <p class="error-text" v-if="errors.ERROR_3">エラー3</p>
           <p class="error-text" v-if="errors.ERROR_4">エラー4</p>
           <p class="error-text" v-if="errors.ERROR_5">エラー5</p>
        </div>
     </div>
     <button type="button" @click="validateForm">
       ボタン
     </button>
  </section>
</template>

<script>
export default {
  name: 'sample',
  data() {
    return {
      hasSystemError: false,
      errors: {
        ERROR_1: false,
        ERROR_2: false,
        ERROR_3: false,
        ERROR_4: false,
        ERROR_5: false
      }
    }
  },
  methods: {
    validateForm() {
      let url
      switch (this.$router.currentRoute.query.response) {
        default:
          url = '/data-sample/sample/index-response.json'
      }
      this.$axios.get(url).then(response => {
        if (response.data.errors.toString()) {
          this.hasSystemError = true
          response.data.errors.map((contact, i) => {
            this.errors[contact] = true
          })
        }
      })
    }
　}
}

Comments

[aa316316]

ご回答ありがとうございます！

上記コードで無事に期待していた動作を実現することができました。
mapで配列を回して、dataを書き換えればよかったんですね。
一人では解決が難しかったため、大変助かりました！
ありがとうございました:)!

[sauzar18]

良かったです。

Answer 2

こうでしょうか？

      this.$axios.get(url).then(response => {
        Object.keys(this.errors).forEach((key) => {
          this.errors[key] = response.data.errors.indexOf(key) !== -1;
        });

        this.hasSystemError = response.data.errors.length > 0;
      });