henkou【Nuxt.js】子コンポーネントのメソッド内のforEachでpropsデータを使用する方法

Question

子コンポーネント内メソッドのforEachでpropsないのデータを取得したいのですが、this.template.widthなどをログで吐かせてもundefindになってしまいます。
このような時にforEach内でpropsの変数を取得する方法を教えてください。

<template>

</template>

<script>
export default {
  props: {
    template: {
        type: Object,
        default: () => ({
          width: "",
          height: "",
          layers: []
      })
    }
  },
  mounted: function() {
  },
  methods: {
    getTemplates() {
      let templates = [
        {
          id: 1,
          width: 300,
          height: 400,
          layers: [
            {"type":"logo", "width":50, "height":50, "x_position": 10, "y_position": 10, "z_index": 1},
            {"type":"image", "width":300, "height":200, "x_position": 100, "y_position": 80, "z_index": 0}
          ]
        },
      ]
      let response = JSON.stringify(templates)
      return JSON.parse(response);

    },

    replaceTemplates() {
      let oldTemplates = this.getTemplates()
      let templates = []
      oldTemplates.forEach(function (templateSettings) {
　　　　　//this.template.width　と　this.template.height　が　undefind になってしまう
        if(templateSettings.width == this.template.width && templateSettings.height == this.template.height) {
          templates.append(template)
        }
      })
    },
  }
}
</script>

Answer 1

どんな風に確認しましたか？

mountedでreplaceTemplatesを呼び出してみましたが、default値を取得出来ているのが確認出来ますよー。

<template>
  <div>
    <p>child component</p>
  </div>
</template>

<script>
export default {
  props: {
    template: {
      type: Object,
      default: () => ({
        width: 500,
        height: 300,
        layers: []
      })
    }
  },
  mounted() {
    this.replaceTemplates()
  },
  methods: {
    getTemplates() {
      const templates = [
        {
          id: 1,
          width: 300,
          height: 400,
          layers: [
            {
              type: "logo",
              width: 50,
              height: 50,
              x_position: 10,
              y_position: 10,
              z_index: 1
            },
            {
              type: "image",
              width: 300,
              height: 200,
              x_position: 100,
              y_position: 80,
              z_index: 0
            }
          ]
        }
      ]
      const response = JSON.stringify(templates)
      return JSON.parse(response)
    },

    replaceTemplates() {
      const oldTemplates = this.getTemplates()
      const templates = []

      oldTemplates.forEach(templateSettings => {
        console.log(`width:${this.template.width}`)
        console.log(`height:${this.template.height}`)

        if (templateSettings.width == this.template.width && templateSettings.height == this.template.height) {
          templates.append(template)
        }
      })
    }
  }
}
</script>

Comments

[tokuwgawa]

ご回答ありがとうございます。
replaceTemplates() メソッドのforEatch内で　console.log(this.template.width)を確認したのですが、表示されませんでした。。

Answer 2

forEachの引数である関数の中で参照しているthisがコンポーネントになっていないことが原因です。
forEachの引数である関数のthisを任意の値に指定する場合は、forEachの第２引数に指定してください。

oldTemplates.forEach(function (templateSettings) {
    console.log(this) // -> `replaceTemplates()`の`this`

もしくは、アロー関数を使って関数のthisをレキシカルに束縛してください。

replaceTemplates() {
    // 省略
    oldTemplates.forEach((templateSettings) => {
        console.log(this) // -> `replaceTemplates()`の`this`
    })
}

もしくは、クロージャを利用して、関数の外側の変数を参照してください。

replaceTemplates() {
    var vm = this
    // 省略
    oldTemplates.forEach(function(templateSettings) {
        console.log(vm) // -> `replaceTemplates()`の`this`
    })
}

参考リンク

• forEachについて
• アロー関数について
• クロージャについて

Googleで検索しても大量に情報があります。
後者２つは重要な概念ですので、一度調べることをおすすめします。