Laravel,vue and inertia Application, how to send array object from index component to another component

Question

I am developing this SPA where the user will select the applicant from the list (index. vue). user shall click on the checkbox which will push the selected applicant to array.
then that array needs to be passed to another component (selectedApplicant.vue) where it shall be processed further. now problem is that I am not able to figure out how to do so. I researched a lot and found that I need to use usePage() to post an array object to another component

  const manageFinancialAssistance = async () => {
  const  { Inertia }  = usePage();
  if (selectedApplicants.value.length > 0) {
    // Use post to make a POST request to the new route
    await Inertia.post ('/financial-assistance', {
      selectedApplicants: selectedApplicants.value,
    });
  } else {
    console.log('Please select an applicant for financial assistance.');
  }
};

it is not working showing the post method of Inertia const is undefined in the console. please help me out with this. check out my code and files.

composer.json

"require": {
        "php": "^8.1",
        "barryvdh/laravel-ide-helper": "^2.13",
        "guzzlehttp/guzzle": "^7.2",
        "inertiajs/inertia-laravel": "^0.6.10",
        "laravel/framework": "^10.10",
        "laravel/sanctum": "^3.2",
        "laravel/tinker": "^2.8",
        "tightenco/ziggy": "^1.8"
    },

index.vue

<template>
  <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
    <Box v-for="applicant in applicants" :key="applicant.id">
      <Link :href="route('applicant.show',applicant.id)">
        <ApplicantNameAndAddress :applicant="applicant" />
      </Link><br>
      <span class="text-xs font-bold">
        <Link :href="route('applicant.edit',applicant.id)">Edit</Link>
      </span> <span class="text-gray-400"> |  </span>
      <span class="text-xs font-bold">
        <Link :href="route('applicant.destroy',applicant.id)" method="DELETE" as="Button">Delete</Link>
      </span><span class="text-gray-400"> |  </span>
      <span>select for assistance.
        <!-- <button @click="selectApplicant(applicant.full_name)">Select for Assistance</button> -->
        <!-- Add styles to indicate selection -->
        <input type="checkbox" @click="selectApplicant(applicant)"/>
      </span>
    </Box>
    <span class = "btn-primary">
    <button @click="manageFinancialAssistance">Manage Financial Assistance</button>
  </span>
  </div>
</template>

<script setup>
import { Link , usePage} from '@inertiajs/vue3'
import { ref } from 'vue';
import ApplicantNameAndAddress from '@/Components/ApplicantNameAndAddress.vue';
import Box from '@/Components/UI/Box.vue';
defineProps({
  applicants: Array
});

// Add a reactive array to track selected applicants
const selectedApplicants = ref([]);

// Method to toggle the selection state for a specific applicant
const selectApplicant = (applicantId) => {
  const index = selectedApplicants.value.indexOf(applicantId);
  if (index === -1) {
    selectedApplicants.value.push(applicantId);
  } else {
    selectedApplicants.value.splice(index, 1);
  }

};
// Method to manage financial assistance
const manageFinancialAssistance = async () => {
  const  { Inertia }  = usePage();
  if (selectedApplicants.value.length > 0) {
    // Use post to make a POST request to the new route
    await Inertia.post ('/financial-assistance', {
      selectedApplicants: selectedApplicants.value,
    });
  } else {
    console.log('Please select an applicant for financial assistance.');
  }
};
</script>

selectedApplicant.vue

<template>
  <div>
    <!-- Your component content here using selectedApplicants -->
  </div>
</template>

<script>
export default {
  props: {
    selectedApplicants: {
      type: Array,
      required: true,
    },
  },
  // Your component logic here
};
</script>

Controller

public function handleFinancialAssistance(Request $request)
  {
    // Your logic to handle financial assistance and save data if needed

    // Redirect to SelectedApplicant.vue with selected applicants data
    return inertia('SelectedApplicant', [
        'selectedApplicants' => $request->input('selectedApplicants'),
    ]);
  }

Web.php

 Route::post('/financial-assistance', 'App\Http\Controllers\Applicant\ManageFinancialAssistanceController@handleFinancialAssistance')->name('applicant.financial-assistance');

output on console.

chunk-KRJR3MWC.js?v=7ab9adee:1486 [Vue warn]: Unhandled error during
execution of native event handler at <Index errors= {} flash=
{success: null} applicants= (17) [{…}, {…}, {…}, {…}, {…}, {…}, {…},
{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]0: {id: 3,
created_at: ‘2024-01-12T15:59:51.000000Z’, updated_at:
‘2024-01-14T08:10:02.000000Z’, full_name: ‘Dr. Bernadette Gislason’,
date_of_birth: >

Index.vue:34 Uncaught (in promise) TypeError:

Cannot read properties of undefined (reading ‘post’)
at manageFinancialAssistance (Index.vue:34:19)
at callWithErrorHandling (chunk-KRJR3MWC.js?v=7ab9adee:1634:18)
at callWithAsyncErrorHandling (chunk-KRJR3MWC.js?v=7ab9adee:1642:17)

Hope i gave full detail

Leave a Comment Cancel reply