@DocTypeMaster

Как вывести данные в компонент vue который используется в другом компоненте?

Делаю компонент который будет выводить пользователей на главную.
Cперва сделал
компонент

<template>
  <layout title="Users">
    <div class="container mt-5">
      <h2>Laravel Inertia JS Pagination Demo</h2>
      <table class="table w-full">
        <thead>
          <tr>
            <th>#ID</th>
            <th>Name</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in usersList.data" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.email }}</td>
          </tr>
        </tbody>
      </table>

      <Pagination class="mt-6" :links="usersList.links" />
    </div>
  </layout>
</template>

<script>
import Pagination from '@/Pages/Pagination'
export default {
  components: {
    Pagination
  },
  props: {
    usersList: Object,
  },
  }
</script>

к нему
роутер
Route::get('users', [IndexController::class, 'index'])
    ->name('users');

Ну и
контроллер
public function index()
  {

$usersList = User::orderBy('id', 'desc')->paginate(3);

      return Inertia::render('Users', [
          'usersList' => $usersList
      ]);
  }


При переходе по адресу "юзерс" все работает и выводится, но я же хочу юзать этот компонент в других компонентах, к примеру я вывожу компонент на главную, и тогда насколько я понял нужно
делать запрос в компоненте юзер через аксиос
<template>
  <layout title="Users">
    <div class="container mt-5">

      <h2>Laravel Inertia JS Pagination Demo</h2>

      <table class="table w-full">
        <thead>
          <tr>
            <th>#ID</th>
            <th>Name</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in usersList.data" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.email }}</td>
          </tr>
        </tbody>
      </table>

      <Pagination class="mt-6" :links="usersList.links" />
    </div>
  </layout>
</template>

<script>
import Pagination from '@/Pages/Pagination'

export default {
  components: {
    Pagination
  },
  props: {
    usersList: Object,
  },
  methods: {
     fetch() {
         axios.get('/users')
     },
 },
 created() {
     this.fetch()
   }
  }
</script>
но он у меня выдает ошибу что не может прочесть дату

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'data')


Скажите как выводить данные в компонент который я юзаю в другом компоненте ?
  • Вопрос задан
  • 142 просмотра
Пригласить эксперта
Ответы на вопрос 1
Если ты делаешь запрос через api то надо не в props а в data
export default {
  components: {
    Pagination
  },
  data() {
    return {
      usersList: null,
    }
  },
  methods: {
     async fetch() {
         this.usersList = await axios.get('/users')
     },
 },
 created() {
     this.fetch()
   }
  }
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы