1

подскажите почему ошибка 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>

1 ответ 1

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>

1
  • 1
    Идеально,спасибо 15 мая 2020 в 17:20

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.