Ошибка при добавлении в массив Vue

Question

подскажите почему ошибка this is undefined ?

<template>
  <div>
    <button class="btn btn-success" @click="addRow">Добавить в новый массив</button>
    <pre><code>{{ newRole }}</code></pre>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        role: [{
            name: 'Alex',
            id: '1'
          },
          {
            name: 'Sveta',
            id: '2'
          },
        ],
        newRole: []
      }
    },
    methods: {
      addRow() {
        this.role.forEach(function(value, key) {
          this.newRole.push(value.id);
        });
      }
    }
  }
</script>

Answer 1

Дело в контексте. Используйте стрелочную функцию в качестве callback для forEach, чтобы использовать в нем this для экземпляра vue.

addRow() {
  this.role.forEach((value, key) => {
    this.newRole.push(value.id);
  });
}

Стрелочные функции особенные: у них нет своего «собственного» this. Если мы используем this внутри стрелочной функции, то его значение берётся из внешней «нормальной» функции. Это является особенностью стрелочных функций. Они полезны, когда мы на самом деле не хотим иметь отдельное значение this, а хотим брать его из внешнего контекста.

new Vue({
  el: '#app',
  data() {
    return {
      role: [{
          name: 'Alex',
          id: '1'
        },
        {
          name: 'Sveta',
          id: '2'
        },
      ],
      newRole: []
    }
  },
  methods: {
    addRow() {
      this.role.forEach((value, key) => {
        this.newRole.push(value.id);
      });
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <button class="btn btn-success" @click="addRow">Добавить в новый массив</button>
  <pre><code>{{ newRole }}</code></pre>
</div>

БЛОГ НА HUSL

Ошибка при добавлении в массив Vue

Ответы (1 шт):