Как во Vue вывести данные с помощью axios?

Question

[enginel]

Здравствуйте, изучаю vue. Подскажите как при клике на кнопку выгрузить из json массив users в class="allUsers"? Вижу в консоле, что при клике подгружаются данные, но как их передать после этого в div?
Хорошо ли, если при каждом следующем клике на кнопку срабатывает get? Или это считается плохой практикой?

<div class="allUsers" v-for="user of users" :key="user">
      <h2>{{user .name}}</h2>
      <p>{{user .email}}</p>
</div>

 <button @click="loadUsers">Click</button>

<script>
export default {
data: () => ({
    users: [],
}), 
methods: {
  loadUsers(){
   this.$axios.$get('https://jsonplaceholder.typicode.com/users');
  }
}
}
</script>

Comments

[Евгений]

Вам нужно не в див данные грузить, а в массив users. Vue заметит изменение данных в массиве и сам перерендерит шаблон, реактивность же)

[WapSter]

Не используй стрелочную функцию в data!!!!

[enginel]

WapSter, почему нельзя?

[WapSter]

enginel, появляются сложно отлавливаемые ошибки с потерей контекста

Answer 1

[Сергей Левченко]

this.$axios.$get('https://jsonplaceholder.typicode.com/users').then((res) => {
  console.log(res);
  this.users = res.data;
});