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

Question

[DocTypeMaster]

Делаю компонент который будет выводить пользователей на главную.
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')

Скажите как выводить данные в компонент который я юзаю в другом компоненте ?

Answer 1

[Александр Ковальчук]

Если ты делаешь запрос через api то надо не в props а в data

export default {
  components: {
    Pagination
  },
  data() {
    return {
      usersList: null,
    }
  },
  methods: {
     async fetch() {
         this.usersList = await axios.get('/users')
     },
 },
 created() {
     this.fetch()
   }
  }

Comments

[DocTypeMaster]

через дату у меня пагинация не работала почему-то

[DocTypeMaster]

Да и в таком случае выводится пустая табличка, но вопрос с пагинацией так и остается открытым, я попробовал ваш код , так оно ругается на length в пагинации

[Александр Ковальчук]

а, ну в template нужно поставить v-if иначе он будет пытаться взять data с null поскольку ответ от сервера прейдёт после прогрузки компонента

также рекомендую через лог или vue devtools посмотреть что в usersList приходит после запроса (возможно там data и links приходит в data и тогда нужно распаковать)

<template>
  <layout title="Users">
    <div class="container mt-5" v-if="usersList">

      <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>

import Pagination from '@/Pages/Pagination'

export default {
  components: {
    Pagination,
  },
  data() {
    return {
      usersList: null,
    }
  },
  methods: {
    fetch() {
      axios.get('/users').then((response) => {
        console.log(response)
        //если тут объект где есть атрибут date и links  тогда так
        this.usersList = response
        //если в объекте data а уже в нем date и links  тогда так
        this.usersList = response.data
      })
    },
  },
  created() {
    this.fetch()
  },
}

[Александр Ковальчук]

props только объявляет что будет идти в компонент (inertiajs уже передает данные) а data позволяет работать с данными внутри компонента поэтому если ты хочешь сделать компонент не привязанный к конкретной станицы тебе нужно чтобы компонент сам брал данные, а соответственно props не подойдет

Также скорее всего еще будет поменять реализацию пагинатора поскольку тот что сейчас перекидывает на другую страницу, а если мы используем это в других страницах то при клике в пагинаторе мы должны по api взять другую страницу, а не делать редирект

И увы тут inertiajs не поможет
В таком случае также есть вопрос не преждевременная ли это оптимизация, а также нужно ли нам на главной странице пагинация (если нет не бойся сделать отдельные компоненты потому что в будущем в списке на странице точно надо будет добавить данные которые не нужно на главной)

Тут я подхожу со стороны сначала ответить на прямой вопрос, а потом попытаться помочь не писать костыли)

[DocTypeMaster]

Александр Ковальчук, пагинация действительно нужна на главной, да я и сам понял что концепция стандартной не подойдет, ибо она ссылается на другую страницу и делает редирект, но пока не знаю как реализовать на апи Александр Ковальчук, выводит пустую таблицу (

[Александр Ковальчук]

DocTypeMaster, а что выводит console.log(response)?

[DocTypeMaster]

Александр Ковальчук,

data

[Александр Ковальчук]

DocTypeMaster, А, ну да нужно не inertia а через api передавать
Базово

public function index() {
    return User::orderBy('id', 'desc')->paginate(3)
}

А так смотреть в сторону Api Resource

[DocTypeMaster]

Александр Ковальчук, так вывело но при переходе на 2 страницу выдаёт такое

[Александр Ковальчук]

DocTypeMaster, да, я выше написал

Также скорее всего еще будет поменять реализацию пагинатора поскольку тот что сейчас перекидывает на другую страницу, а если мы используем это в других страницах то при клике в пагинаторе мы должны по api взять другую страницу, а не делать редирект

[DocTypeMaster]

Александр Ковальчук, Александр Ковальчук, а есть какие-то варианты ? я гуглил апи пагинация но что-то нахожу тоже самое

[Александр Ковальчук]

DocTypeMaster, Поскольку вижу ты используешь bootstrap рекомендую как пример посмотреть реализацию в bootstrap-vue pagination

Когда компонент изменяет страницу нужно сделать запрос где подставить нужную страницу и подменить объект пользователей (можно использовать тот же метод fetch просто добавить активную страницу)